关于 SASS 的一些思考

前言

最近在看 Element UI 的 CSS 开发规范，也有一些启发。此文用来记录下。

主要是遵循 BEM 规范。

B: Block 模块
E: Element 元素
M: Modifier 修饰符（ 状态、属性 ）

.block{}
.block__element{}
.block--modifier{}

思想

作用域

SASS 也是有一些 作用域机制 的，那么，局部变量 和 全局变量 就合理存在了。

一般用 $ 表示 变量
也有用 #{} 表示 , 通过 #{} 插值语句可以在选择器或属性名中使用变量

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}
/* 编译为 */ 
p.foo {
  border-color: blue; 
  }

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量）。
不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。
将局部变量转换为全局变量可以添加 !global 声明：

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}
/* 编译为 */ 

#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

Slot 插槽

@content : 向混合样式中导入内容 (Passing Content Blocks to a Mixin)

官方解释： 在引用混合样式的时候，可以先将一段代码导入到混合指令中，然后再输出混合样式，额外导入的部分将出现在 @content 标志的地方。

白话理解：@content 即为 插槽 、占位符。在 include mixin 时 ，定义在 mixin 里。

请看示例：

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

/* 编译为 */ 
* html #logo {
  background-image: url(/logo.gif);
}

指令，类似 JS 功能 （ 循环、 ）

• @each : 遍历循环 语法是 $var in <list>

  @each $animal in puma, sea-slug, egret, salamander {
    .#{$animal}-icon {
      background-image: url('/images/#{$animal}.png');
    }
  }
  
  /* 编译为 */ 
  
  .puma-icon {
    background-image: url('/images/puma.png'); }
  .sea-slug-icon {
    background-image: url('/images/sea-slug.png'); }
  .egret-icon {
    background-image: url('/images/egret.png'); }
  .salamander-icon {
    background-image: url('/images/salamander.png'); }
  
  /*------------------------------------------------------------------------------*/ 
  
  // element 这里用来便捷传入 e 参数数组
  @each $unit in $element {
      $currentSelector: #{$currentSelector +
        "." +
        $B +
        $element-separator +
        $unit +
        ","};
    }
  // 传入当前 `class`，可以是数组，逗号隔开即可。
  
  @include b((card)) {
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    transition: 0.3s;
    
    @include e(footer) {   //传入单个
      padding: 20px;
    }
  
    @include e((title, body)) {  //传入数组
      padding: 30px;
    }
  }
  
  //编译后
  .mk-card .mk-card__footer {  //传入单个编译结果
    padding: 20px;
  }
  .mk-card .mk-card__title,  //传入数组编译结果
  .mk-card .mk-card__body {
    padding: 30px;
  }

参考文档：

SASS doc