sass 结构化类名

结构化类名是一个非常常见的css类名处理方式，好处在于：

1. 避免了复合选择器的使用，类名层次关系明确，更易于后期维护；
2. 让css像js一样可折叠，代码简洁方便阅读；

示例：

  <!-- 采用结构化类名 -->
  <div class="header">
    <div class="header-user">
      <div class="header-user-img" />
      <div class="header-user-name">
        天涯路儿
      </div>
    </div>
  </div>

在使用sass时，可以使用父选择器 & 进行结构化类名的处理，使其变得可折叠。

父选择器 & ：您可以使用父选择器为外部选择器添加额外的后缀。当使用像BEM这样使用高度结构化类名的方法时，这一点尤其有用。只要外部选择器以字母数字名称结尾（如类、ID和元素选择器），就可以使用父选择器附加其他文本。

@mixin avatar($url, $size: 50px) {
  width: $size;
  height: $size;
  border-radius: 50%;
  background: url($url) center/cover no-repeat;
}

/** 使用父选择器 & 处理结构化类名 */
.header {
  width: 375px;
  margin: 0 auto;
  background: #fdf;
  &-user {
    display: flex;
    align-items: center;
    &-img {
      @include avatar("~/assets/head.jpg");
    }
    &-name {
      margin-left: 10px;
      font-size: 22px;
      color: #f0a;
    }
  }
}

这时，css可以像js代码块一样折叠，后期封装组件或是重构都可以直接折叠起来，打包带走。

并且所有样式都是直接添加到对应的元素，没有使用复合选择器。这意味着所有的元素样式都不依赖于元素所处的位置。

当元素被拖走，脱离原本位置时。

元素自身样式保持不变

命名没有绝对的规范，但一个好的命名方式往往能减轻维护的负担。避免使用复合选择器，是一个好习惯，能使代码更简洁，更易于维护。

参考链接：

sass-lang.com/documentati…