前端Sass样式预处理器详解

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。通过编译预处理生成CSS。

入门使用，目前以vscode作为编辑器进行Sass操作详解。

官网文档位置：https://sass-lang.com/documentation

一、预备环境

1. 安装插件，Live Sass Compiler。

2. 插件扩展配置

3. 进入配置文件，选中在setting.json中编辑。

4. 配置文件模板

{
    "workbench.colorTheme": "Default High Contrast",
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "~/../css"
        }
        //以下部分为正式上线环境中，启用压缩格式css
        // {
        //     "format": "compressed",
        //     "extensionName": ".min.css",
        //     "savePath": "~/../css"
        // }
    ],
    "liveSassCompile.settings.autoprefix": [    
        "> 1%",
        "last 2 versions",
    ],
    "liveSassCompile.settings.excludeList": [
        "/**/node_modules/**",
        "/.vscode/**"
    ]
}

5. 右下角可以看到sass实时编译已经启动

二、语法功能拓展

1. 选择器嵌套

sass:

.container {
  width: 1200px;
  border-color: white;
  margin:0 auto;
  .header{
    height: 50px;
    background-color: aqua;
    .logo{
      width: 100px;
      padding: 5px 10px;
    }
  }
}

生成css:

.container {
  width: 1200px;
  border-color: white;
  margin: 0 auto;
}
.container .header {
  height: 50px;
  background-color: aqua;
}
.container .header .logo {
  width: 100px;
  padding: 5px 10px;
}/*# sourceMappingURL=demo.css.map */

2. 父选择器&

sass:

.container {
  width: 1200px;
  border-color: white;
  margin:0 auto;
  a{
    text-decoration: none;
    color: gray;
    &:hover{
      color: #ff0;
    }
  }
  .left{
    border:1px solid black;
    &-top{
      float:left;
      width: 100px;
    }
  }
}

生成css:

.container {
  width: 1200px;
  border-color: white;
  margin: 0 auto;
}
.container a {
  text-decoration: none;
  color: gray;
}
.container a:hover {
  color: #ff0;
}
.container .left {
  border: 1px solid black;
}
.container .left-top {
  float: left;
  width: 100px;
}/*# sourceMappingURL=demo.css.map */

3. 属性嵌套

sass:

.container {
  width: 1200px;
  border-color: white;
  margin:0 auto;
  a{
    text-decoration: none;
    color: gray;
    //属性名冒号后必须有空格
    font: {
      size : #ff0;
      family:sans-serif;
      weight:bold;
    }
  }
}

生成css:

.container {
  width: 1200px;
  border-color: white;
  margin: 0 auto;
}
.container a {
  text-decoration: none;
  color: gray;
  font-size: #ff0;
  font-family: sans-serif;
  font-weight: bold;
}/*# sourceMappingURL=demo.css.map */

4. 占位符选择器%

占位符%配合@extend实现相同的样式复用。

scss:

.container%base {
  width: 1200px;
  border-color: white;
  margin:0 auto;
  text-decoration: none;
  line-height: 1.428;
  font-size: #ff0;
  font-family: sans-serif;
  font-weight: bold;
}
.container-top{
  @extend %base;
  color:#333;
  background-color: #fff;
}

生成css:

.container.container-top {
  width: 1200px;
  border-color: white;
  margin: 0 auto;
  text-decoration: none;
  line-height: 1.428;
  font-size: #ff0;
  font-family: sans-serif;
  font-weight: bold;
}

.container-top {
  color: #333;
  background-color: #fff;
}/*# sourceMappingURL=demo.css.map */

5. 注释

在SASS中有两种注释格式，一种是单行注释//，该注释在SASS中只能注释单行，编译成css后不显示。另一种是/* ... */，该注释在SASS中可以注释多行内容，编译成css后仍然显示该注释内容。

三、变量

1. 变量的声明$

注意：-与_表示在变量中表示的内容一致。

scss:

$width:1200px;
$border-color:white;
//$border-color与$border_color相同，都会编译成$border-color
$border_color:red;
.container {
  width: $width;
  border-color: $border-color;
}

生成css:

.container {
  width: 1200px;
  border-color: red;
}/*# sourceMappingURL=demo.css.map */

2. 变量的作用域

（1）局部作用域：在选择器内容里面定义的变量，只能在选择器范围内使用。

scss:

.container {
  $width:1200px;
  width: $width;
  p{
    width: $width;
  }
}

生成的css

.container {
  width: 1200px;
}
.container p {
  width: 1200px;
}/*# sourceMappingURL=demo.css.map */

（2）全局作用域:定义后全局使用的变量。

• 第一种：在选择器的外面的最前面定义的变量。

scss:

$width:1200px;
.container {
  width: $width;
  p{
    width: $width;
  }
}

生成的css

.container {
  width: 1200px;
}
.container p {
  width: 1200px;
}/*# sourceMappingURL=demo.css.map */

• 第二种：使用!global标志定义全局变量

scss:

.container {
  $width:1200px !global;
  width: $width;  
}
p{
  width: $width;
}

生成的css

.container {
  width: 1200px;
}

p {
  width: 1200px;
}/*# sourceMappingURL=demo.css.map */

3. 变量的类型

SASS支持6种主要的数据类型。

• 数字：1，2，12px；

• 字符串：'hello'，'foo'，bar；

• 颜色值：red，#f00，rgba(255,132,112,0.5)；

• 布尔值：true，false；

• 空值：null；

• 数组：用逗号或者空格做分隔符，10px 2px 4px 7px，'Open Sans',Helvetica,Sans-serif；

• maps：相当于javascript中object，(key1:value1,key2:value2)；

scss:

$layer-index:10;
$border-width:3px;
$font-base-family:'Open Sans',Helvetica,Sans-serif;
$top-bg-color:rgba(255,147,29,0.5);
$block-base-padding:6px 10px 6px 10px;
$blank-mode:true;
$var:null; 
$color-map:(color1:#fa0000,color2:#fbe200,color3:#95d7ed);
.container {
  @if $blank-mode{
     background-color: $top-bg-color;
  }
  @else{
     background-color: map-get($color-map,color2);
  }
  z-index: $layer-index;
  border:$border-width solid black;
  font-family: $font-base-family;
  padding: $block-base-padding;
  content:type-of($var);
  content:length($var);
  color: map-get($color-map, color1 );
}

生成的css

.container {
  background-color: rgba(255, 147, 29, 0.5);
  z-index: 10;
  border: 3px solid black;
  font-family: "Open Sans", Helvetica, Sans-serif;
  padding: 6px 10px 6px 10px;
  content: null;
  content: 1;
  color: #fa0000;
}/*# sourceMappingURL=demo.css.map */

4. 变量的默认值

之前定义过，使用定义值；之前未定义，使用默认值。

scss:

$color:#999 !default;
.container {
  color:$color;
}

生成的css

.container {
  color: #999;
}/*# sourceMappingURL=demo.css.map */

四、导入@import

1. 常规导入

导入的文件将合并编译到同一css文件中。

scss:

//pub.scss
$color:red;

//demo.scss
@import 'pub';
.container {
  color:$color;
}

生成的css

/* demo.css */
.container {
  color: red;
}/*# sourceMappingURL=demo.css.map */

2. 模块化scss

一般情况下，scss文件都会编译生成css文件，如果不生成目标css文件，只能被import引入使用，需要在scss文件名称前面增加_，则不生成指定的css，可以作为模块，通过import使用。

五、混合指令

可用于定义可重复使用的样式。

1. 无参数

scss:

@mixin block{
  width:96%;
  margin-left: 2%;
  border-radius: 8px;
  border:1px #f6f6f6 solid;
}
.container{
  @include block;
}

生成的css

.container {
  width: 96%;
  margin-left: 2%;
  border-radius: 8px;
  border: 1px #f6f6f6 solid;
}/*# sourceMappingURL=demo.css.map */

2. 有参数

（1）固定参数

scss:

// 参数上通过:XXX指定默认值
@mixin block($item:center){
  align-items: $item;
  -webkit-box-align: $item;
  -webkit-align-items:$item;
  -ms-flex-align: $item;
}
.container{
  /*
    或者可以通过以下指定参数
    @include block($item:center);
  */
  @include block(center);
}

生成的css

.container {
  align-items: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
}/*# sourceMappingURL=demo.css.map */

（2）可变参数

scss:

@mixin line-gradient($direction,$gredients...){
  //nth(数组,第几个) 取数组元素第几个内容
  background-color: nth($gredients,1);
  background-image: linear-gradient($direction,$gredients);
}
.container{
  @include line-gradient(to right,#f00,orange,yellow);
}

生成的css

.container {
  background-color: #f00;
  background-image: -webkit-gradient(linear, left top, right top, from(#f00), color-stop(orange), to(yellow));
  background-image: linear-gradient(to right, #f00, orange, yellow);
}/*# sourceMappingURL=demo.css.map */

六、继承指令

有两种情况，一种未使用占位符，所继承的父类即使没有使用，但编译生成css仍然存在。另一种使用占位符，父类不参与编译后生成的css文件中。

1、未使用占位符

scss:

.alert{
  padding:5px;
  margin-bottom: 20px;
  border:1px solid transparent;
  border-radius: 4px;
  font-size: 14px;
}
.alert-danger{
   @extend .alert;
   color:#a94442;
   background-color: #f2dede;
   border-color: #ebccd1;
}

生成的css

.alert, .alert-danger {
  padding: 5px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 14px;
}

.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}/*# sourceMappingURL=demo.css.map */

2、使用占位符%

scss:

%alert{
  padding:5px;
  margin-bottom: 20px;
  border:1px solid transparent;
  border-radius: 4px;
  font-size: 14px;
}
.alert-danger{
   @extend %alert;
   color:#a94442;
   background-color: #f2dede;
   border-color: #ebccd1;
}

生成的css

.alert-danger {
  padding: 5px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 14px;
}

.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}/*# sourceMappingURL=demo.css.map */

七、运算符

1. 等号运算符

scss:

$theme:1;
$type:button;
.container{
  @if $theme !=1 {
     background-color: red;
  }@else{
     background-color: blue;
  }
  @if $type=='button'{
    border-radius: 4px;
    border-color: gray;
  }@else{
    border-color: orange;
  }
}

生成的css

.container {
  background-color: blue;
  border-radius: 4px;
  border-color: gray;
}/*# sourceMappingURL=demo.css.map */

2. 比较运算符

scss:

$theme:3;
.container{
  @if $theme <=5 {
     background-color: red;
  }@else{
     background-color: blue;
  }
}

生成的css

.container {
  background-color: red;
}/*# sourceMappingURL=demo.css.map */

3. 逻辑运算符

scss:

$width:100;
$height:200;
$last:false;
.container{
  @if $width >50 and $height<300 {
     font-size: 16px;
  }@else{
    font-size: 14px;
  }
  @if not $last {
    border-color: red;
  }@else{
    border-color: orange;
  }
}

生成的css

.container {
  font-size: 16px;
  border-color: red;
}/*# sourceMappingURL=demo.css.map */

4. 数字操作符

可以使用的数值符号有：纯数字，%，px，pt，...

scss:

.container{
  /*
 ——————————————————————— 运算符+ ————————————————————
  */
  width:50+20;
  width:50px+20px;
  width:50+20px;
  width:50%+20;
  /* 
     错误，不同数值符号不能参与运算
     width:50%+20px;
  */
/*
 ——————————————————————— 运算符- ————————————————————
  */
  width:50-20;
  width:50px-20;
  width:50px-20px;
  width:50%-20;
  /* 
     错误，不同数值符号不能参与运算
     width:50%-20px;
  */
  /*
 ——————————————————————— 运算符* ————————————————————
  */
  width:50*2;
  width:50px*2;
  width:50*2%;
  /* 
     错误，不同数值符号不能参与运算
     width:50%*20px;
     错误，相同数值符号不能参与运算
     width:50px*2px;
     widht:50%*2%;
  */
  /*
 ——————————————————————— 运算符/ ————————————————————
  */
  width:5/2;
  width:calc(5/2);
  $width:10;
  width:$width/2;
  width:10px/2px+5;
  width:round(10)/2;
  /* 
     使用除法运算符需要进行以下三种操作
     --1、值或值的一部分，是变量或者函数的返回值
     --2、值被calc()方法包裹
     --3、值是算数表达式的一部分
  */ 
/*
 ——————————————————————— 运算符% ————————————————————
  */
  width:5 % 2;
  width:5 % 3px;
  width:5px % 3px;
  width:50% % 7;
  /* 
     错误，不同数值符号不能参与运算
     width:50% % 7px;
  */ 
}

生成的css

@charset "UTF-8";
.container {
  /*
  ——————————————————————— 运算符+ ————————————————————
   */
  width: 70;
  width: 70px;
  width: 70px;
  width: 70%;
  /* 
     错误，不同数值符号不能参与运算
     width:50%+20px;
  */
  /*
   ——————————————————————— 运算符- ————————————————————
    */
  width: 30;
  width: 30px;
  width: 30px;
  width: 30%;
  /* 
     错误，不同数值符号不能参与运算
     width:50%-20px;
  */
  /*
  ——————————————————————— 运算符* ————————————————————
   */
  width: 100;
  width: 100px;
  width: 100%;
  /* 
     错误，不同数值符号不能参与运算
     width:50%*20px;
     错误，相同数值符号不能参与运算
     width:50px*2px;
     widht:50%*2%;
  */
  /*
  ——————————————————————— 运算符/ ————————————————————
   */
  width: 5/2;
  width: 2.5;
  width: 5;
  width: 10;
  width: 5;
  /* 
     使用除法运算符需要进行以下三种操作
     --1、值或值的一部分，是变量或者函数的返回值
     --2、值被calc()方法包裹
     --3、值是算数表达式的一部分
  */
  /*
   ——————————————————————— 运算符% ————————————————————
    */
  width: 1;
  width: 2px;
  width: 2px;
  width: 1%;
  /* 
     错误，不同数值符号不能参与运算
     width:50% % 7px;
  */
}/*# sourceMappingURL=demo.css.map */

5. 字符串运算

+号可用于字符串的连接。

注意：如果引号字符串在+号左边，连接无引号字符串，运算结果有引号。相反，无引号字符串在+号左边，连接有引号字符串，运算结果无引号。

scss:

.container{
  content:'foo'+bar;
  content:foo+'bar';
  content:foo+bar;
  content:'foo'+'bar';
}

生成的css

.container {
  content: "foobar";
  content: foobar;
  content: foobar;
  content: "foobar";
}/*# sourceMappingURL=demo.css.map */

八、插值语句#{...}

作用为解析为变量的值，插值语句可以用于选择器，属性名，属性值，注释...。

scss:

$class-name:danger;
$attr:color;
$author:'老王';
$font-size:12px;
$line-height:30px;
.container.#{$class-name}{
  #{$attr}:red;
  font:#{$font-size}/#{$line-height} Helvetica;
  /*
     author:#{$author}
  */
}

生成的css

@charset "UTF-8";
.container.danger {
  color: red;
  font: 12px/30px Helvetica;
  /*
     author:老王
  */
}/*# sourceMappingURL=demo.css.map */

九、常见函数

1. Color函数

常用函数，例如：lighten()与darken()函数用于调亮或调暗颜色；opacify()与transparentize()函数用于透明度减少或增加；mix()函数用于混合两种颜色。

scss:

.container{
   $color:#f2f2f2;
   $rgb-color:rgba(12,12,12,0.3);
   color:lighten($color,30%);
   color:darken($color,25%);
   color:opacify($rgb-color, 0.3);
   color:transparentize($rgb-color,0.2);
   color:mix($color,red);  
}

生成的css

.container {
  color: white;
  color: #b2b2b2;
  color: rgba(12, 12, 12, 0.6);
  color: rgba(12, 12, 12, 0.1);
  color: #f97979;
}/*# sourceMappingURL=demo.css.map */

2. String函数

常见函数，例如：向字符串添加引号quote()；获取字符串长度str-length()；返回子字符串在主字符串的索引str-index()；将内容插入字符串给定位置str-insert()；转换字符串大写或者小写to-upper-case()与to-lower-case()。

scss:

.container{
  content:quote(Helvetica); 
  content:quote("Helvetica"); 
  content:str-length("Helvetica");
  content:str-index("Helvetica", "c");
  content:to-upper-case(Helvetica);
  content:to-lower-case(Helvetica);
  content:str-insert(Helvetica, aa, 2);
}

生成的css

.container {
  content: "Helvetica";
  content: "Helvetica";
  content: 9;
  content: 8;
  content: HELVETICA;
  content: helvetica;
  content: Haaelvetica;
}/*# sourceMappingURL=demo.css.map */

3. Math函数

常用函数，例如：向上舍入最大整数或者向下舍入最小整数ceil()与floor()；四舍五入最近整数round()；将无单位数字转换为百分比percentage()。

scss:

.container{
  font-size: ceil(4.2);
  font-size: floor(4.9);
  font-size: round(4.5);
  font-size: percentage(0.2);
}

生成的css

.container {
  font-size: 5;
  font-size: 4;
  font-size: 5;
  font-size: 20%;
}/*# sourceMappingURL=demo.css.map */

4. List函数

常用函数，例如：length()返回列表长度；nth()返回列表中的特定项；join()将两个列表连接在一起；append()在列表末尾添加一个值。

scss:

.container{
  content: length(12px);
  content: length(12px 15px 18px);
  color: nth(red blue green,2);
  margin:join(12px 20px ,30px 20px);
  padding: append(10px 20px,15px);
}

生成的css

.container {
  content: 1;
  content: 3;
  color: blue;
  margin: 12px 20px 30px 20px;
  padding: 10px 20px 15px;
}/*# sourceMappingURL=demo.css.map */

5. Map函数

常用函数，例如：map-get()根据键值获取map中对应的值；map-merge()来将两个map合并成一个新map；map-values()映射中的所有值；map-keys()映射中的所有key；map-has-key()是否包含指定的key值。

scss:

$font-size:("small":12px,"normal":18px,"large":24px);
$padding:(top:10px,right:20px,bottom:10px,left:30px);
.container{
  font-size: map-get($font-size,normal);
  @if map-has-key($padding ,right ){
    padding-left: map-get($padding,right );
  }
  &:after{
    content:map-keys($font-size)+' '+map-values($font-size);
  }

生成的css

.container {
  font-size: 18px;
  padding-left: 20px;
}
.container:after {
  content: '"small", "normal", "large" 12px, 18px, 24px';
}/*# sourceMappingURL=demo.css.map */

6. Selector选择器函数

常用函数，例如：selector-append()可以把一个选择符附加到另一个选择符；selector-unify()将两组选择器合成一个复合选择器。

scss:

.container{
  content:selector-append(".a",".b",".c")+""; 
  content:selector-unify("a",".disabled")+"";
}

生成的css

.container {
  content: ".a.b.c";
  content: "a.disabled";
}/*# sourceMappingURL=demo.css.map */

7. 自检函数

常用函数，例如：feature-exists()检查当前Sass版本是否存在某个特性；variable-exists()检查当前作用域中是否存在某个变量；mixin-exists()检查某个mixin是否存在。

scss:

$color:#f00;
@mixin padding($left:0,$top:0,$right:0,$bottom:0){
    padding:$top $right $bottom $left;
}
.container{
  @if variable-exists(color){
    color:$color; 
  }@else{
    content:"$color不存在";
  }
  @if mixin-exists(padding){
    @include padding($left:10px,$right:10px)
  }
}

生成的css

.container {
  color: #f00;
  padding: 0 10px 0 10px;
}/*# sourceMappingURL=demo.css.map */

十、流程控制指令

1. @if指令

scss:

$color:red;
.container{
  @if $color=="blue"{
    font-size: 10px;
  }@else if $color=="green"{
    font-size: 16px;
  }@else{
    font-size: 24px;
  }
}

生成的css

.container {
  font-size: 24px;
}/*# sourceMappingURL=demo.css.map */

2. @for指令

有两种指令格式：@for $var from <start> through <end> 和 @for $var from <start> to <end>。

当使用through时，条件范围包括<start>和<end>的值。

而使用to时，条件范围只包含<start>不包含<end>的值。

scss:

.container{
  @for $i from 1 to 4{
    .p#{$i}{
      width:10px * $i;
      height:30px;
      background-color: red;
    }
  }
}

生成的css

.container .p1 {
  width: 10px;
  height: 30px;
  background-color: red;
}
.container .p2 {
  width: 20px;
  height: 30px;
  background-color: red;
}
.container .p3 {
  width: 30px;
  height: 30px;
  background-color: red;
}/*# sourceMappingURL=demo.css.map */

3. @each指令

格式：@each $var in <list>。

scss:

$color-list:red blue green orange turquoise gray;
.container{
  @each $color in $color-list{
    .p#{index($color-list,$color)}{
      color:$color;
    }
  }
}

生成的css

.container .p1 {
  color: red;
}
.container .p2 {
  color: blue;
}
.container .p3 {
  color: green;
}
.container .p4 {
  color: orange;
}
.container .p5 {
  color: turquoise;
}
.container .p6 {
  color: gray;
}/*# sourceMappingURL=demo.css.map */

4. @while指令

scss:

$column:12;
@while $column>0{
    .col-sm-#{$column}{
        width: calc(100% / 12 * $column);
    }
    $column:$column - 1;
}

生成的css

.col-sm-12 {
  width: 100%;
}

.col-sm-11 {
  width: 91.6666666667%;
}

.col-sm-10 {
  width: 83.3333333333%;
}

.col-sm-9 {
  width: 75%;
}

.col-sm-8 {
  width: 66.6666666667%;
}

.col-sm-7 {
  width: 58.3333333333%;
}

.col-sm-6 {
  width: 50%;
}

.col-sm-5 {
  width: 41.6666666667%;
}

.col-sm-4 {
  width: 33.3333333333%;
}

.col-sm-3 {
  width: 25%;
}

.col-sm-2 {
  width: 16.6666666667%;
}

.col-sm-1 {
  width: 8.3333333333%;
}/*# sourceMappingURL=demo.css.map */

十一、自定义函数

格式：@function function-name($param1,$param2,...){ ... @return ...}。

scss:

@function row-cols-width($column){
    @return percentage(1 / $column);
}
@for $i from 1 through 6{
  .row-cols-#{$i}>* {
     width:row-cols-width($i);
  }
}

生成的css

.row-cols-1 > * {
  width: 100%;
}

.row-cols-2 > * {
  width: 50%;
}

.row-cols-3 > * {
  width: 33.3333333333%;
}

.row-cols-4 > * {
  width: 25%;
}

.row-cols-5 > * {
  width: 20%;
}

.row-cols-6 > * {
  width: 16.6666666667%;
}/*# sourceMappingURL=demo.css.map */

十二、三元条件函数

格式：if($condition,$if-true,$if-false)

判断$condition条件成立，则返回$if-true语句，条件为假，则返回$if-false语句。

scss:

$theme:light;
.container{
  color:if($theme==light,#f00,#ff0);
}

生成的css

.container {
  color: #f00;
}/*# sourceMappingURL=demo.css.map */

十三、@use的使用

从其他Sass样式表加载mixin，function和变量，并将来自多个样式表的css组合在一起，@use加载的样式表被称为“模块”，多次引用只包含一次。@use看作是@import的增强。

• @use引入同一文件多次，不会重复引入，而@import会重复引入。

• @use引入的文件都是一个模块，默认以文件名作为模块名，可通过as alias取别名。

• @use引入多个文件时，每个文件都是单独的模块，相同的变量名不会覆盖，通过模块名访问，而@import变量会被覆盖。

• @use方式可通过@use 'XXX' as *来取消命名空间，建议不要这么做。

• @use模块可通过$-或$_定义私有变量，也就是-或_开头的变量，mixin，function不会被引入。

• @use模块内变量可通过!default定义默认值，引入时可通过with(...)的方式修改。

• 可定义-index.scss或_index.scss来合并多个scss文件，@use默认会加载文件。

scss:

//_pub.scss
$color:blue !default;
@mixin color-theme{
     font-size:14px;
     padding:5px 10px;
}

//demo.scss
@use 'pub' as ar with($color:red) ;
.container{ 
  color:ar.$color;
  @include ar.color-theme;
}

生成的css

.container {
  color: red;
  font-size: 14px;
  padding: 5px 10px;
}/*# sourceMappingURL=demo.css.map */

十四、@forward的使用

通过@forward加载一个模块的成员，并将这些成员当作自己的成员对外暴露出去，类似于es6中export ...，通过用于跨多个文件组织Sass库。

用于@forward命令后show指令可用于显示暴漏的内容，hide指令用于隐藏暴漏的内容。

转发增加属性的命名空间需要增加as xxx-*，同时使用指定模块的属性前也需要增加。

scss:

//_pub.scss
$color:blue !default;
@mixin color-theme{
     font-size:14px;
     padding:5px 10px; 
}

//_channel.scss
@forward 'pub' as p-* show $p-color with($color:orange); 

//demo.scss
@use 'channel' as ar;
.container{ 
  color:ar.$p-color;
  /*
     @forward 'XXX' show指令指定转发暴漏的内容，没有混入，所以下面语句执行报错！
  */
  //@include ar.color-theme;  
}

生成的css

.container {
  color: orange;
}/*# sourceMappingURL=demo.css.map */

十五、@at-root的使用

@at-root可以使被嵌套的选择器或属性跳出嵌套。

1. 常规嵌套

scss:

.parent{
  font-size: 12px;
  @at-root .child{
     font-size: 14px;
     @at-root .son{
      font-size: 16px;
     }
  }
}

生成的css

.parent {
  font-size: 12px;
}
.child {
  font-size: 14px;
}
.son {
  font-size: 16px;
}/*# sourceMappingURL=demo.css.map */

2. 多个嵌套

.parent{
  font-size: 12px;
  @at-root{
    .child1{
       color:red;
    }
    .child2{
       color:green;
    }
    .child3{
       color:blue;
    }
  }
}

生成的css

.parent {
  font-size: 12px;
}
.child1 {
  color: red;
}

.child2 {
  color: green;
}

.child3 {
  color: blue;
}/*# sourceMappingURL=demo.css.map */

3. &实现嵌套跳出

.parent{
  font-size: 12px;
  & {
     color:orange;
  }
}

生成的css

.parent {
  font-size: 12px;
}
.parent {
  color: orange;
}/*# sourceMappingURL=demo.css.map */

4. @at-root(without:...)和@at-root(with:...)的使用

默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，则需使用@at-root(without:media)或@at-root(without:support)。有如下关键字可选择：

• all(表示所有)

• rule(表示常规css，默认)

• media(表示media)

• support(表示support)

@media screen {
  .parent{
    font-size: 12px;
    @at-root (without:media){
       .child{
        font-size: 14px;
        .son{
         font-size: 16px;
        }
     }
    } 
  }
}

生成的css

@media screen {
  .parent {
    font-size: 12px;
  }
}
.parent .child {
  font-size: 14px;
}
.parent .child .son {
  font-size: 16px;
}/*# sourceMappingURL=demo.css.map */

以上就是Sass的全部内容，感谢您能读到这里！