html Sass：在HTML / CSS #sass中使用反斜杠作为命名空间分隔符

Posted 2021-05-11

<ul class="vertical-list">
  <li class="vertical-list\item">Item</li>
  <li class="vertical-list\featured-item">Item</li>
  <li class="vertical-list\item">Item</li>
</ul>

<ul class="horizontal-list">
  <li class="horizontal-list\item">Item</li>
  <li class="horizontal-list\featured-item">Item</li>
  <li class="horizontal-list\item">Item</li>
</ul>

.vertical-list, .horizontal-list {
  list-style: none;
  margin: 1em;
  padding: 0;
}

.vertical-list\\featured-item, .vertical-list\\item, .horizontal-list\\featured-item, .horizontal-list\\item {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vertical-list\\featured-item, .vertical-list\\item {
  margin: .5em 0;
  padding-left: 4px;
  border-left: 1px solid #888;
}

.vertical-list\\featured-item {
  padding-left: 3px;
  border-left-width: 2px;
}

.horizontal-list\\featured-item, .horizontal-list\\item {
  display: inline-block;
  margin: 0 .5em 0 0;
  border-bottom: 1px solid #888;
}

.horizontal-list\\featured-item {
  border-bottom-width: 2px;
}

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

// Sass: Using back-slash as the namespace separator in HTML/CSS
//
// Other ideas: https://github.com/whizark/xass#ideas 

// You may use single back-slash as the namespace
// for Mixin/Function/Placeholder selector in Sass,
// but you must use double back-slash in CSS.

// (The reason I use placeholder for base definitions,
//  wrap it with mixin
//  and use mixin in other modules/client code is
//  that extending is fragile and a bad practice for extension.
//  Mixin encapsulates inner extending in this case.)

// Generic List Definitions
// ========================
// Module placeholder defines base styles.
%vendor\\list {
  list-style: none;
  margin: 1em;
  padding: 0;
}

// Module Mixin wraps base styles and extends them.
@mixin vendor\\list() {
  @extend %vendor\\list;

  // Wrapping placeholder, it reduces duplicated code
  // and it's opened for extension.
}

%vendor\\list\\item {
  list-style: none;
  margin: 0;
  padding: 0;
}

@mixin vendor\\list\\item() {
  @extend %vendor\\list\\item;
}

// Vertical List Definitions
// =========================
%vendor\\vertical-list {
  @include vendor\\list();
}

@mixin vendor\\vertical-list {
  @extend %vendor\\vertical-list;
}

%vendor\\vertical-list\\item {
  @include vendor\\list\\item();

  margin: .5em 0;
  padding-left: 4px;
  border-left: 1px solid #888;
}

%vendor\\vertical-list\\item {
  @include vendor\\list\\item();
}

@mixin vendor\\vertical-list\\item {
  @extend %vendor\\vertical-list\\item;
}

%vendor\\vertical-list\\featured-item {
  @include vendor\\vertical-list\\item();

  padding-left: 3px;
  border-left-width: 2px;
}

@mixin vendor\\vertical-list\\featured-item {
  @extend %vendor\\vertical-list\\featured-item;
}

// Horizontal List Definitions
// ===========================
%vendor\\horizontal-list {
  @include vendor\\list();
}

@mixin vendor\\horizontal-list {
  @extend %vendor\\horizontal-list
}

%vendor\\horizontal-list\\item {
  @include vendor\\list\\item();

  display: inline-block;
  margin: 0 .5em 0 0;
  border-bottom: 1px solid #888;
}

@mixin vendor\\horizontal-list\\item {
  @extend %vendor\\horizontal-list\\item
}

%vendor\\horizontal-list\\featured-item {
  @include vendor\\horizontal-list\\item();

  border-bottom-width: 2px;
}

@mixin vendor\\horizontal-list\\featured-item {
  @extend %vendor\\horizontal-list\\featured-item
}

// Client Code: Concrete Classes
// =====================================================
// Using mixin, it may accept arguments
// and it's closed for modification.
.vertical-list {
  @include vendor\\vertical-list();
}

.vertical-list\\item {
  @include vendor\\vertical-list\\item();
}

.vertical-list\\featured-item {
  @include vendor\\vertical-list\\featured-item();
}

.horizontal-list {
  @include vendor\\horizontal-list();
}

.horizontal-list\\item {
  @include vendor\\horizontal-list\\item();
}

.horizontal-list\\featured-item {
  @include vendor\\horizontal-list\\featured-item();
}

<ul class="vertical-list">
  <li class="vertical-list\item">Item</li>
  <li class="vertical-list\featured-item">Item</li>
  <li class="vertical-list\item">Item</li>
</ul>

<ul class="horizontal-list">
  <li class="horizontal-list\item">Item</li>
  <li class="horizontal-list\featured-item">Item</li>
  <li class="horizontal-list\item">Item</li>
</ul>