虽然已经在多个项目中使用过sass,但在研究element sass搭建UI框架的源码中，发现很多自己没用过的高级用法，借着这次总结对sass的知识体系进行详细的梳理。

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

1安装编译

1.1 安装

• 安装ruby(mac下自带Ruby无需在安装Ruby!)

  • 官网https://rubyinstaller.org/downloads/中下载 安装包，傻瓜式安装安装完成运行CMD ，输入命令ruby -v，安装成功会打印版本号

  • 删除替换原gem源

  //删除替换原gem源 
  gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org///查看gem源
  gem sources -l//查看gem安装的内容
  gem list

• 安装sass与compass

gem install sass
gem install compass//安装指定版本
gem install sass --version=3.3//查看安装版本
sass -v
compass -v

1.2 编译

• 命令行编译

//单文件编译;进入scss目录
sass demo.scss demo.css//监听文件下的scss文件；进入scssTest目录
sass --watch scss:css   //将scss目录中的文件编译为css，存放至css目录

• 命令行指令

--watch   监听文件变化并执行编译
--no-catch 不生成.sass-cache 文件
--sourcemap 添加调试map
--style 选择编译格式 （nested``expanded``compact``compressed）//选择编译格式并添加调试map
sass --watch input.scss:output.css --style expanded --sourcemap

• 软件方式编译

  koala&codekit,它们是优秀的编译器；支持Less、Sass、Compass、CoffeeScript，不做过多说明

• Live Sass编译器

• VSCode扩展，可通过实时浏览器重新加载来帮助您实时将SASS / SCSS文件编译/转换为CSS文件。

• webpack 配置

npm install -D sass-loader node-sass style-loader css-loadermodule: {rules: [{test: /\.scss$/,use: ['style-loader','css-loader','sass-loader'],exclude: /node_modules/}]
}

1.3 输出格式

• nested 格式

  选择器与属性等单独占用一行，缩进量与 Sass 文件中一致，每行的缩进量反映了其在嵌套规则内的层数。当阅读大型 CSS 文件时，这种样式可以很容易地分析文件的主要结构。

• expanded 格式

  Expanded 输出更像是手写的样式，选择器、属性等各占用一行，属性根据选择器缩进，而选择器不做任何缩进。

• compact 格式

  每条 CSS 规则只占一行，包含其下的所有属性。嵌套过的选择器在输出时没有空行，不嵌套的选择器会输出空白行作为分隔符。

• compressed 格式

  Compressed 输出方式删除所有无意义的空格、空白行、以及注释，力求将文件体积压缩到最小，同时也会做出其他调整，比如会自动替换占用空间最小的颜色表达方式。

2 语法格式

2.1 语法格式

• Sass 语法格式，被称为缩进格式 (Indented Sass) ，是一种简化格式；以严格的缩进式语法规则来书写，不带大括号({})和分号
• SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能；和我们的 CSS 语法书写方式非常类似。
• 一般推荐使用scss，语法要求没那么严格

2.2 编码格式

一般使用使用 @charset声明编码格式，没有检测到，默认使用 UTF-8 编码。

2.3 注释

Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会 被完整输出到编译后的 CSS 文件中，而后者则不会

3 sass Script

3.1 变量

3.1.1 变量写法

• 变量以美元符号开头
• scss认为中划线和下划线是完全相等的

$primary : #DABE8D !default;

3.1.2 变量作用域

• 局部变量：定义在选择器之内的变量，使用范围是该选择器与子选择器
• 全局变量：定义在选择器之外的变量，子选择器中也定义了同名变量，则会覆盖全局变量

// 编译前
$width : 200px;
.block{$width: 100px;#{&}-item{width: $width;}
}
.block-other{width: $width;
}//编译后 （ .variable采用嵌套作于域内的变量，.variable1使用的外层全局变量）
.block .block-item {width: 100px;
}
.block-other {width: 200px;
}

• 局部变量转换为全局变量可以添加 !global

// 编译前
.block{$width: 100px !global;#{&}-item{width: $width;}
}
.block-other{width: $width;
}// 编译后
.block .block-item {width: 100px;
}.block-other {width: 100px;
}

3.1.3 变量定义，设置变量的默认值 !default

变量的结尾添加 !default可指定默认值，此时，如果变量已经被赋值，不会再被重新赋值，如果变量未被赋值，则会被赋予新的值。

• 变量已赋值

// 编译前
$primary-dark : pink;
$primary-dark : red  !default;
.block{color: $primary-dark;
}// 编译后 （变量值还是前面声明的值）
.block {color: pink;
}

• 变量未被赋值

// 编译前
$primary-dark : null;
$primary-dark : red  !default;
.block{color: $primary-dark;
}
// 编译后  （变量值为后面新赋予的值）
.block {color: red;
}

3.2 数据类型

• 数值（1, 2, 13, 10px）
• 字符串，有引号字符串与无引号字符串（“foo”, ‘bar’, baz）
• 颜色（blue, #04a3f9, rgba(255,0,0,0.5)）
• 布尔型（true, false）
• 空值（null）
• 数组 (list)，用空格或逗号作分隔符（1.5em 1em 0 2em, Helvetica, Arial, sans-serif）
• maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

3.3 运算

注意 ：

• 加、减、乘、除都必须是同一单位下运算，不然会报错。
• 减法左边不留空格，直接做拼接，为了避免相关问题,运算符的两边都预留空格
• 多个值单位相同时，只需要为一个值提供单位即可。
• 圆括号可以用来影响运算的顺序
• #{} 可以避免 Sass 运行运算表达式，直接编译 CSS

3.3.1 数值运算

• 加减

  • 加减需要在同单位下进行运算
  • 一个带单位与一个不带单位的计算，以带单位的单位为主

• 乘法

  • 支持多种单位；但只需给一个计算项带上单位即可，若每一项都带单位则会报错。

  .mk-col-6 {width: (1 / 24 * 6 * 100) * 1%;
  }
  

• 除法

  • 以下三种情况 / 将被视为除法运算符号：

  // 如果值，或值的一部分，是变量或者函数的返回值
  $width-c : 200px;
  .block{width: $width-c / 2;
  }//如果值被圆括号包裹
  .block{width: (100px) / 2;
  }//如果值是算数表达式的一部分
  .block{width: (100px) / 2;margin-left: 4px + 8px/2px;
  }
  

  • 如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。

  .block{$font-size: 12px;$line-height: 30px;font: #{$font-size}/#{$line-height};
  }
  

3.3.2 字符串运算

• • 可用于连接字符串

//编译前
.block{content: "hello " + "world";
}//编译后
.block {content: "hello world"; 
}

• 最终的运算结果的字符串类型以+号左侧的字符串类型（带引号或不带引号）为主

//编译前
.block{content: "hello " + world;
}//编译后
.block {content: "hello world"; 
}

3.3.1 颜色运算

颜色的计算用的范围较少，不做过多研究，有兴趣的朋友可以去官网学习，今天着重介绍几个Sass 内置颜色方法

• 颜色的表示法

  • HEX 表示法（十六进制）
  • RGB 表示法
  • HSL 表示法

  HSL 是色相（Hue）、饱和度（Saturation）和亮度（Lightness）这三个颜色属性的简称。
  色相（Hue）是色彩的基本属性(红、青、黄等)；饱和度（Saturation）是指色彩的纯度，越高越浓、越低越淡；亮度（Lightness）指的是色彩的明暗程度，越高色彩越白，越低色彩越黑

• Mix 函数 （mix($color1, $color2, $weight: 50%)）

颜色 $color1 与 $color2 混合在一起生成新的颜色;$weight决定了颜色在结果里的比重，如果指定的比例是 25% ,这意味着第一个颜色所占比例为 25%，第二个颜色所占比例为 75%。

span{&:nth-child(2){background: mix($--color-primary, white, 80%);}&:nth-child(3){background: mix($--color-primary, black, 80%);
}

• lighten 函数 （lighten($color, $amount)

将颜色 $color 变亮，$mount 是介于 0% 到 100% (含) 之间的值。按照这个值增加 $color HSL 的亮度。

span{background: lighten( $--color-primary, 10% );
}

• darken 函数 （darken($color, $amount)

将颜色 $color 加深，$mount 是介于 0% 到 100% (含) 之间的值。按照这个值减少 $color HSL 的亮度。

span{background: darken( $--color-primary, 10% );
}

• rgba函数 （rgba函数($color, $amount)

改变颜色透明度，$mount 是介于 0 到 1 (含) 之间的值

span{background: rgba( $--color-primary,0.8);
}

• 几种颜色函数的效果比较

3.4 函数 @function

• SASS中函数的功能是传入参数，经过函数内部的计算判断，然后需要搭配@return输出一个值的。但是必须设定返回值(return)
• 与混合的区别是混合生成具体样式，函数返回特定值
• 想要直接输出样式，使用mixin；想执行返回值的运算，使用function

3.4.1 sass内建函数

sass的内建函数可以去看看摄氏零度写的《Sass 内建函数用法一览》，我觉得总结的挺详细的

3.4.2 sass自定义函数

• 函数可以访问任何全局定义的变量
• 函数传参，可直接传不定参，按照它们在函数中列出的顺序传递参数；

//编译前
$total : 2;
@function column-width($col, $total) { @return (1 / $total * $col * 100) * 1%;
}
@for $i from 1 through $total {.mk-col-#{$i} {width: column-width($i,$total)    //调用column-width,获取返回的宽度}
}//编译后
.mk-col-1 {width: 50%;
}.mk-col-2 {width: 100%;
}

• 使用关键字。可以使用key：value的格式传递键/值对则不必按它们在函数中列出的顺序来排列。

//编译前
$total : 2;
@function column-width($col, $total) { @return percentage($col/$total); //也可使用percentage($number) ,sass内置函数；将数字化为百分比的表达形式
}
@for $i from 1 through $total {.mk-col-#{$i} {width: column-width($total:$total,$col:$i)}
}
//编译后
.mk-col-1 {width: 50%;
}.mk-col-2 {width: 100%;
}

• 设置传参默认值

//编译前
@function column-width($col:3, $total:4) { @return percentage($col/$total);
}
.mk-col-3 {width: column-width(2)
}
//编译后
.mk-col-3 {width: 50%;
}

• 设置可变参数，类似ES6中的解构，但在函数中没什么应用场景，适合在mixins中有用，可以添加多个盒子阴影

//编译前
@function column-width($index, $widths...){  @return nth($widths, $index);    //nth($list, $n),获取列表中第 $n 项的值。
}
.mk-col-3 {  width: column-width(3, 25%, 50%, 75%, 100%);  
}//编译后
.mk-col-3 {width: 75%;
}

4 嵌套

4.1 Sass嵌套规则

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，避免了重复输入父选择器

//编译前
.mk-cell {display: flex;width: 100%;padding: 6px 12px;overflow: hidden;.mk-cell__title {width: 80px;flex-shrink: 0;color: #666;}.mk-cell__value {flex-basis: auto;font-weight: 600;}
}
//编译后
.mk-cell {display: -webkit-box;display: -ms-flexbox;display: flex;width: 100%;padding: 6px 12px;overflow: hidden;
}.mk-cell .mk-cell__title {width: 80px;-ms-flex-negative: 0;flex-shrink: 0;color: #666;
}.mk-cell .mk-cell__value {-ms-flex-preferred-size: auto;flex-basis: auto;font-weight: 600;
}

4.2 父选择器:&的巧用

• 直接使用嵌套外层的父选择器，设定 hover或者伪类元素是可用

//编译前
.mk-cell {background: #fff;&:hover{background: #eee;}
}
//编译后
.mk-cell {background: #fff;
}
.mk-cell:hover {background: #eee;
}

• 使用父选择器&构建新的选择器-同级

//编译前
.mk-cell {background: #fff;&__title {width: 80px;flex-shrink: 0;color: #666;}
}
//编译后
.mk-cell {background: #fff;
}
.mk-cell__title {width: 80px;-ms-flex-negative: 0;flex-shrink: 0;color: #666;
}

• 使用父选择器&构建新的子级选择器则需要借用插值#{}

//编译前
.mk-cell {background: #fff;#{&}__title {width: 80px;flex-shrink: 0;color: #666;}
}
//编译后
.mk-cell {background: #fff;
}
.mk-cell .mk-cell__title {width: 80px;-ms-flex-negative: 0;flex-shrink: 0;color: #666;
}

4.3 属性嵌套

有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中

//编译前
.mk-cell {background: #fff;font: {family: fantasy;size: 30em;weight: bold;}
}
//编译后
.mk-cell {background: #fff;font-family: fantasy;font-size: 30em;font-weight: bold;
}

4.4 占位符选择器 %

当占位符选择器单独使用时（未通过 @extend 调用），不会编译到 CSS 文件中；方便定义样式的重复使用

//编译前
.mk-cell {background: #fff;%title{  //未调用前不会被编译font: {family: fantasy;size: 30em;weight: bold;}}
}
.mk-cell-title{@extend %title;//通过@extend调用后被编译
}
//编译后
.mk-cell {background: #fff;
}.mk-cell .mk-cell-title {font-family: fantasy;font-size: 30em;font-weight: bold;
}

4.5 与@import的配合使用

导入的scss文件内容会写入到嵌套的选择器下，编译与常规的嵌套编译一样

//编译前
//_tag.scss
@each $color in red, blue, pink {.tag-#{$color}{color: $color;}
}
//demo.scss
.tag-group{@import "./_tag";
}//编译后
.tag-group .tag-red {color: red;
}.tag-group .tag-blue {color: blue;
}.tag-group .tag-pink {color: pink;
}

5 混合

混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的class；混合指令可以包含所有的CSS规则，绝大部分Sass规则，甚至通过参数功能引入变量，输出多样化的样式。

5.1 混合的定义与使用

• 混合指令的用法是在 @mixin 后添加名称与样式
• 使用 @include 指令引用混合样式，格式是在其后添加混合名称，以及需要的参数（可选）：

@mixin utils-ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
//如果没有要传递的参数，可直接使用@include utils-ellipsis，
.block{@include utils-ellipsis
}

5.2 混合的传参

详细说明参考 ++3.4.2 sass自定义函数++

• 普通传参

//有传递的参数时加上括号，在括号中传参
@mixin ellipsis($line) {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: $line;
}
.block{@include ellipsis(2)
}

• 混合关键词传参

//编译前
@mixin button-variant($color, $background, $border) {color: $color;border: 1px solid $border;background-color: $background;
}
.block{@include button-variant( $background:#fff,$color:red, $border:red)
}
//编译后
.block {color: red;border: 1px solid red;background-color: #fff;
}

• 混合参数变量（不定参传参）

//编译前
@mixin box-shadow($shadows...) {-moz-box-shadow: $shadows;-webkit-box-shadow: $shadows;box-shadow: $shadows;
}
.shadows {@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
//编译后
.shadowed {-moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;-webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

• 向混合样式中导入内容 （与@content的结合）

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

//编译前
@mixin res( $max-width:600 ) {// 循环断点Map，如果存在则返回@media only screen and (max-width: $max-width) {@content;}
}
.block{@include res(768){//@content中呈现的样式display: block;width: 100%; }
}//编译后
@media only screen and (max-width: 768) {.block {display: block;width: 100%;}
}

• 混合与其他指令的混用
  混合中可以自由的是要@if、@at-root、插值语法#{}、&父元素等指令，与编写常规样式一样

//编译前
@mixin ellipsis_mix($line:1) {@if $line > 1 { //与@if的使用overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: $line;} @else {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}&:hover{   //&父元素的使用background: #eee;;}#{&}-item{//插值语法#{}的使用display: flex;}
}
.block_ellipsis{@include ellipsis_mix(1)
}
//编译后
.block_ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}.block_ellipsis:hover {background: #eee;
}.block_ellipsis .block_ellipsis-item {display: -webkit-box;display: -ms-flexbox;display: flex;
}

6 @-Rules 与指令

6.1 @-Rules使用

6.1.2 sass导入-@import的使用

@import 用于从其他样式表导入样式规则，在这里要先给大家分析一下css的导入和sass导入的区别 ：

• css的导入，引用的文件只有在引用它的那个css文件被下载、解析之后，浏览器才会知道要下载、解析被引用的文件，此时会发起一个HTTP的请求，css文件要被完全解析完才会开始渲染页面，因此css @import引起的css解析延迟会加长页面留白期，不推荐使用，尽量使用link导入
• sass的导入@import指令直接将代码包含进目标SCSS文件,不产生额外的http请求

接下来给大家总结下sass导入规则

• 导入文件拓展名为 .css、或者以http://开头、或者url()、或者@import 包含 media queries 均当做css3引入规则使用
• 除了以上情况，文件的拓展名是 .scss 或 .sass，则导入成功。没有指定拓展名，Sass 将会试着寻找文件名相同，拓展名为 .scss 或 .sass 的文件并将其导入。
• 可以嵌套导入（参考嵌套章节的导入）
• 不可在控制指令或者混合指令中直接使用，但可在指令中的嵌套的css规则中使用

//直接使用报错  Import directives may not be used within control directives or mixins
@mixin import_test($line:1) {@import "tag.css";
}//在混合中嵌套使用，其他控制指令也是同理的哦
@mixin import_test($line:1) {.tag-group{@import "tag.css";}
}
.block{@include import_test();
}//编译结果
.block .tag-group .tag-red {color: red;
}.block .tag-group .tag-blue {color: blue;
}.block .tag-group .tag-pink {color: pink;
}

6.1.2 @media 媒体查询的使用

@media在sass中可以用于嵌套中，但编译时会编译到最外层，主要是方便书写，不做过多分析

6.1.3 样式延伸-@extent的使用

样式继承的话就着重说下常用的几个方面

• 将重复使用的样式继承到使用继承语句的样式中

// 编译前
.pink{background: pink;
}
.block{width: 100px;@extend .pink
}//编译后
.pink, .block {   //.block继承了.pink的样式background: pink;
}
.block {width: 100px;
}

• 结合占位符%定义一套样式,单独使用不编译,只有被引用的时候才会被渲染

// 编译前
%pink{background: pink;
}
.block{width: 100px;@extend %pink;
}//编译后
.block {background: pink;
}.block {width: 100px;
}

在这里我就要总结下混合、继承、函数的区别了

• 混合主要是通过参数功能引入变量，输出多样化的样式，为了可以现实代码复用。
• 函数的功能是传入参数，经过函数内部的计算判断，然后需要搭配@return输出一个值的。
  而混合与继承之间，最大的区别在于编译的方式不同，混合编译的结果直接在样式类中加入样式，可能会存在代码冗余，而继承只是对类添加选择器达到共用的目的
• 继承没有传参，不能像混合一样输出多样化的样式

// 编译前
.pink{background: pink;
}
@mixin ellipsis($line:1) {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: $line;
}
.block{width: 100px;@extend .pink;@include ellipsis
}
//编译后
.block {  //继承了pink的样式background: pink;
}
.block {width: 100px;//引用混合，生成了混合输出的样式 overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;
}

6.1.4 @at-root的使用

• 默认@at-root只会跳出选择器嵌套(跳出所有上级选择器)，而不能跳出@media或@support
• 如果需要跳出,可使用以下指令
  • @at-root (without:all) 跳出所以层级(包括一切父级、@media、@support)
  • @at-root (without:rule) 跳出选择器嵌套,@at-root不带规则时，默认该指令
  • @at-root (without:media)（表示media） //跳出@media
  • @at-root (without:support)表示support，@support因为兼容性没有大范围使用,不做深究

//编译前
/*跳出父级元素嵌套*/
.parent{  //此时默认的是@at-root (without: rule) width : 100px;//单个选择器使用@at-root .child {width: 50px;}//多个选择器使用@at-root {.child1 {width: 50px;}.child2 {width: 50px;}}
}
/*常规情况下@at-root能跳出父级，不能跳出@media*/
@media screen and (max-width: 300px) {.parent{color:#f00;@at-root .child {width: 50px;}}
}
/*使用without: media跳出父级，跳出media层*/
@media screen and (max-width: 300px) {.parent{color:#f00;@at-root (without: media) {.child {width: 50px;}}}
}
/*使用without: all跳出父级，跳出media层*/
@media screen and (max-width: 300px) {.parent{color:#f00;@at-root (without: all) {.child {width:200px;}}}
}
//编译后
/*跳出父级元素嵌套*/
.parent {width: 100px;
}
.child {width: 50px;
}
.child1 {width: 50px;
}
.child2 {width: 50px;
}
/*常规情况下@at-root能跳出父级，不能跳出@media*/
@media screen and (max-width: 300px) {.parent {color: #f00;}.child {width: 50px;}
}
/*使用without: media跳出父级，跳出media层*/
@media screen and (max-width: 300px) {.parent {color: #f00;}
}
.child {width: 50px;
}
/*使用without: all跳出父级，跳出media层*/
@media screen and (max-width: 300px) {.parent {color: #f00;}
}
.child {width: 200px;
}

6.1.5 sass的控制指令

Sass控制命令在@mixin和@function中用的比较多，为其提供相应的流程和逻辑判断

6.1.5.1 判断指令

@if指令根据条件来处理样式块，条件为true返回一个样式块，反之返回另一个样式块，与js用法相似

//编译前
@mixin ellipsis_mix($line:1) {@if $line > 1 { //与@if的使用overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: $line;  } @else {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
}
.block{@include ellipsis_mix(2)
}//编译后
.block {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
}

6.1.5.2 循环指令

• 循环指令@for

@for 这个指令包含两种格式：@for $var from through ，或者 @for $var from to ，区别就是through包含end值,to不包含end值， 和 必须是整数值;来通过Layout 布局来分析该指令的用法

//编译前  -- @for $var from <start> through <end>
@for $i from 0 through 3 {.mk-col-#{$i} {width: (1 / 3 * $i * 100) * 1%;}
}
//编译后  包含end值3
.mk-col-0 {width: 0%;
}.mk-col-1 {width: 33.33333%;
}.mk-col-2 {width: 66.66667%;
}.mk-col-3 {width: 100%;
}//编译前  -- @for $var from <start> to <end>
@for $i from 0 to 3 {.mk-col-#{$i} {width: (1 / 3 * $i * 100) * 1%;}
}
//编译后  不包含end值3
.mk-col-0 {width: 0%;
}.mk-col-1 {width: 33.33333%;
}.mk-col-2 {width: 66.66667%;
}

• 循环指令@while

@while 指令有点像@if和@for的结合，表达式为true时会生成不同的样式块，直到表达式值为 false 时停止循环,因此能实现相对复杂的功能

//编译前
$nums: 0;   
@while $nums < 8{  //条件不用包裹在括号里.mk-col-#{$nums} {width: (1 / 8 * $nums * 100) * 1%;}$nums : $nums + 2
}
//编译后
.mk-col-0 {width: 0%;
}.mk-col-2 {width: 25%;
}.mk-col-4 {width: 50%;
}.mk-col-6 {width: 75%;
}

• 循环指令@each

@each的用法就可以挺广泛，一般在搭建UI框架时,图标、字体等都可以使用该指令，语法为@each $var in ;为sass数组变量（数组 (list)，用空格或逗号作分隔符（1.5em 1em 0 2em, Helvetica, Arial, sans-serif，前面有说明）；可以对应单个值也可分配多个变量值，以搭建背景图标和字体图标样式文件为例

@each指令分配单个变量

//编译前
@each $var in add edit delete check {.#{$var}-icon {background-image: url('/images/#{$var}.png');}
}
//编译后
.add-icon {background-image: url("/images/add.png");
}.edit-icon {background-image: url("/images/edit.png");
}.delete-icon {background-image: url("/images/delete.png");
}.check-icon {background-image: url("/images/check.png");
}

@each指令也可以分配多个变量;用逗号隔开

//编译前
@each $icon-name,$icon-content in (add,/e6a6) (edit,/e6a6) (delete,/e6a7) (check,/e6a8) {.#{$icon-name}-icon {  //quote函数，为传入的字符串添加双引号，如已有双引号，则不做操作，直接返回该字符串。content: quote($icon-content);}
}
//编译后
.add-icon {content: "/e6a6";
}.edit-icon {content: "/e6a6";
}.delete-icon {content: "/e6a7";
}.check-icon {content: "/e6a8";
}

7在sass中BEM架构

这里我后期会结合element的源码做一个详细的总结，码字不容易，就先到这里啦，后期不定期完善的，点个小星星给我动力哦！