程序员经验分享-hwhale

前端Sass样式预处理器详解

2023-11-11

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

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

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

一、预备环境

  1. 安装插件，Live Sass Compiler。

  1. 插件扩展配置

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

  1. 配置文件模板

{
    "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/**"
    ]
}

  1. 右下角可以看到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 */

  1. 父选择器&

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 */

  1. 属性嵌套

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 */

  1. 占位符选择器%

占位符%配合@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 */

  1. 注释

在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 */

  1. 变量的作用域

（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 */

  1. 变量的类型

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 */

  1. 变量的默认值

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

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 */

  1. 模块化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 */

  1. 有参数

（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 */

  1. 比较运算符

符号

说明

备注

<（lt）

小于

只能比较数字

>（gt）

大于

<=（lte）

小于等于

>=（gte）

大于等于

scss:

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

生成的css

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

  1. 逻辑运算符

符号

说明

and

逻辑与

or

逻辑或

not

逻辑非

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 */

  1. 数字操作符

可以使用的数值符号有：纯数字，%，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 */

  1. 字符串运算

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

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

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 */

  1. 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 */

  1. 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 */

  1. 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 */

  1. 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 */

  1. 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 */

  1. 自检函数

常用函数，例如：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 */

  1. @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 */

  1. @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 */

  1. @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 */

  1. 多个嵌套

.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 */

  1. &实现嵌套跳出

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

生成的css

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

  1. @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的全部内容，感谢您能读到这里！

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

sass

前端

css

Powered by 金山文档

前端Sass样式预处理器详解 的相关文章

  • 将单选按钮放置在图像上

    我试图在图像上的确切位置放置一些单选按钮 我已将两者都放在 Div 中 但我不知道下一步该怎么做 这是我想要放置单选按钮的位置 红色圆圈 到目前为止 这是我的代码 center display block margin left auto

  • 将 html 转换为 pdf 时防止表格单元格跨页破坏

    使用 Google Apps 脚本 我有一个 html 模板 我填写该模板 然后以 pdf 形式发送 通过传真和 或电子邮件 该模板包括一个带有问题 答案的两列表格 如果行数足够多 表格会在pdf中跨页分页 并且分页符通常发生在单元格的中间

  • 边界半径圆

    我有这个代码 span p margin 0 span background color red display inline block border radius 50 span p 25 p p 08 p span 我想在我的跨度上画

  • ReactTable 修复了最后一行

    我正在使用 ReactTable 最后我需要创建一些摘要 当分页存在时 它每次都应该可见 可以用react table来实现吗 我可以通过创建下一个表来部分解决这个问题 但我没有找到如何隐藏标题的方法 另一个问题是调整列宽度时 它不会应用于

  • 有 CSS 父选择器吗？

    我该如何选择 li 元素是锚元素的直接父元素 举个例子 我的 CSS 应该是这样的 li lt a active property value 显然 有多种方法可以使用 JavaScript 实现此目的 但我希望 CSS Level 2 本

  • 使用JQuery检查元素是否有边框？

    所以我正在玩 el css 尝试确定元素是否有边框 我用 css border style solid 设置边框 这是可行的 但实际上它设置了 4 种单独的样式 border right style border left style bo

  • 如何仅使用CSS设置某个角的边框半径

    如上所示 我可以只给顶部部分而不给底部提供半径 或者有时给底部而不是顶部提供半径吗 有没有办法只给一个角提供边界半径 Like border radius top left top right bottom right bottom lef

  • IE8 忽略 td 宽度，适用于 IE7

    有一张表看起来像这样 table width 100 tr td td tr tr td style width 201px td td style width 100 td tr table 在除 IE8 之外的每个浏览器 包括 IE7

  • 使用本机 JavaScript 获取过渡中的 CSS 值

    这个问题之前被问过 但答案使用了 jQuery here https stackoverflow com q 8920934 3186555 因此 我将调整问题以专门询问native解决方案 to 最小化依赖关系 假设您有一个 div 然后

  • div Hello div div Howdy dere pardner div div div 我明白它的作用 但为什么叫这个名字both 什么是both mean 两者的意思是 一组两件事中的每一项 左 和 右 两件事

  • 自定义 WP 主题时，我应该将导航栏放在“”标签之前还是之后？

    我正在通过制作子主题来自定义 WP 主题 我将 Bootstrap 中的导航栏放入子主题目录中的 header php 文件中 但是 我不确定在哪里放置导航栏代码 我可以把它都放在前面and之后标记成功 例如 无论我选择哪一个 导航栏都显示

  • 使用 python 在一个 html 页面中显示分割数据框的 HTML 代码

    我是 html css 新手 所以对以 html 格式显示的数据有疑问 我有一个很长的列表 我想将其拆分并以 html 格式显示为两个单独的列 例如 而不是 Col1 Col2 1 a 2 a 3 a 4 a 5 b 6 b 7 b 8 b

  • div 中的中心文本？

    我有一个div 30px高和500px宽的 这div可以包含两行文本 一行在一行 并相应地设置样式 填充 但有时它只包含一行 我希望它居中 这可能吗 要水平居中 请使用text align center 要垂直居中 只能使用vertical

  • Sass：@use 出错，未定义变量

    我正在使用 Sass 并且想要使用 use关键字而不是 import 因为 import有很多问题 另外只有dart sass支持这个功能 我将node sass改为dart sass 然而 问题出现了 我原来的代码 import carb

  • 浮动图像周围具有最小列宽的流动文本

    我想要一种方法来防止流动文本列变得太窄 例如 在一列 HTML 文本中 有一个图像浮动到左侧 正如预期的那样 文本沿着图像周围的列的右侧向下流动 但是 如果图像几乎与列一样宽 则文本最终会非常窄 在这种情况下 我希望文本简单地not流过图像

  • Bootstrap：如何将按钮组对齐在中心（垂直）

    在下面的代码中

  • 如何在其他div id的悬停中使用div显示块

    如何打开div悬停时标记href tag 这是我在悬停 href 标签上显示 div 标签的代码 Services is id of href tag Services is id of div tag Service hover Serv

  • 如何使用javascript确保元素仅在圆上朝一个方向移动？

    好吧 我承认我对三角学真的很糟糕 出于上下文的考虑 我将添加我在这里提到的问题中的内容 参考问题 https stackoverflow com a 39429290 168492 https stackoverflow com a 394

  • 如何通过单击链接来更改 div 的内容？

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st

  • Webpack 4：如何使用 LESS 获取 CSS 源映射？

    多年来我一直在尝试让 CSS 源映射在 webpack 中工作 但没有成功 我不确定链条中哪里出了问题 我希望有人能指出我正确的方向 这是发生的事情 行号是错误的 实际上文件名也是错误的 main less只是包含一堆 import也就是说

随机推荐

  • vue js-table2excel 导出excel 可带多张图片

    1 安装js table2excel插件 npm install js table2excel 2 使用 2 1 引入 import table2excel from js table2excel 2 2 导出函数 function exp

  • Docker部署skywalking9.2版本

    注意使用docker部署skywalking和使用tar包部署有点不一样OAP和UI需要分别部署原因是 SkyWalking UI 和 OAP 是 SkyWalking 的两个主要组件 它们之间的关系是前端和后端的关系 SkyWalking

  • windows下环境变量配置后没生效，不重启电脑的解决办法

    本篇文章主要讲解windows配置了环境变量但没有生效的原因及不重启电脑的解决办法 作者 任聪聪 配置环境变量后显示命令不存在 找不到 现象如下 主要原因 windows配置完毕环境变量 由于某种原因没有即时的同步更新 这可能是注册表没有即

  • 解决conda无法创建环境

    想用Python36的环境来做另一个项目 结果创建一直报错 试过在命令台创建 在anaconda界面里面创建 在Pycharm里面创建都失败了 后来查询才发现可能是镜像源的问题 报错情况 解决方法 更改在C Users 16340的 con

  • MFC新建内部消息

    提示 记录一下MFC新建内部消息的成功过程 文章目录 前言 一 第一阶段 二 第二阶段 三 第三阶段 总结 前言 先说一下基本情况 因为要在mapview上增加一个显示加载时间的功能 然后发现是要等加载完再显示时间 显示在主窗口 所以就是在

  • Python基础操作真题（三）

    第七套 1 键盘输入正整数s 按要求把s输出到屏幕 格式要求 宽度为25个字符 等号字符 填充 右对齐 带千位分隔符 如果正整数超过25位则按真实长度输出 s input print gt 25 format eval s 2 获得用户输入

  • Shell编程——脚本编写思路与过程

    Linux系统Shell编程 脚本编写思路与过程 前段时间有小伙伴问我一些问题 涉及到shell脚本的编写问题 事后 我深入思考了下 实际生产环境的确也会经常用到 因此如何写这个脚本 它的思路在哪 带这个问题引入今天的文章 仅供参考 如有不

  • python中的输入与输出

    文章目录 python中的输入与输出 1 python中的输入 2 比较两个数值的大小 3 python中的格式化的输出 4 格式化输出的练习 python中的输入与输出 1 python中的输入 python3 x input pytho

  • 权限维持-白银票据

    前言 白银票据是利用域的服务账户进行伪造ST 需要一些服务进行交互 比如cifs 共享文件服务 mysql sqlserver之类的 所以白银票据是没有黄金票据这么好用的 但是比白银票据更加隐藏一些 注 限定域环境 复现 1 收集信息 还是

  • 时序数据和语音处理

    时序数据 时序数据概述 即时间序列数据 用于时序预测 作用 用来连续观察同一对象在不同时间点上获得的数据样本集 处理目标 对给定的时间序列样本 找出统计特性和发展规律性 推测未来值 语音是一类特殊的时序数据 识别语音对应的文本信息是当前人工

  • MySQL基础篇

    目录 MySQL概念 数据库相关概念 MySQL数据库 启动与停止 客户端连接 数据模型 SQL SQL通用语法 SQL分类 DDL 数据库操作 表操作 图形化工具的使用 DataGrip DML DQL DCL 函数 字符串函数 数值函数

  • 函数被声明为已否决

    函数被声明为已否决 尝试这个1 Project Properties gt Configuration Properties gt C C gt General gt SDL checks关掉 我的电脑这个方法可以其他方法 2 pragma

  • 判断数组内容是否相同

    题目 设计一个方法 用于比较两个数组的内容是否相同 思路 1 定义两个数组 分别使用静态初始化完成数组元素的初始化 2 定义一个方法 用于比较两个数组的内容是否相同 3 比较两个数组的内容是否相同 按照下面的步骤实现就可以了 首先比较数组长

  • Ubuntu18.04 Apache2 配置CGI环境 C语言编写

    本人的Ubuntu版本号 18 04 4 LTS 根据其他人的参考资料 这套教程在Ubuntu的16 18 20版本基本上是通用的 1 卸载apache2 没有安装过的话可以跳过这一步 要保留网页文件的话 就不要 rm rf var www

  • corntab定时执行任务

    corntab介绍 cron 这个守护进程是为了周期性执行任务或处理等待事件而存在 任务调度分两种 系统任务调度 用户任务调度 计划任务的安排方式分两种 一种是定时性的 也就是例行 就是每隔一定的周期就要重复执行 一种是突发性的 就是这次做

  • 新建SpringBoot Maven项目中pom常用依赖配置及常用的依赖的介绍

    完整的pom文件放在后面 一 常用的依赖的介绍 1 springboot项目的总 父 依赖大全

  • Java8中List转Map的实现方法

    在Java编程开发中 经常会遇到将List转换为Map的需求 List是一种有序的集合 而Map则是一种键值对的映射关系 在Java8中 我们可以使用Stream API提供的新特性来实现这一转换 Java8中List转Map的实现方法 在

  • C++编译过程详述

    对于编译过程的总结 源于我的一个突然的好奇 编译头文件和编译头文件对应的源文件有没有区别 因为写makefile的时候依赖即可以写头文件 也可以写源文件 在网上查了半天 估计我的这个问题比较stupid 也没有明确的回答 索性顺藤摸瓜看了看

  • 游戏王大师规则3

    自己一年前翻译的老物了 放在这里算是做个存档 1 OCG Official Card Game 概要 1 1 决斗 游戏王ARC V OCG 以下略称 OCG 是原则上供2人游玩的游戏 而且 按 OCG 规则决出一局胜负称为 决斗 OCG

  • 前端Sass样式预处理器详解

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

热门标签