一篇文章搞懂sass(scss)预处理器

1.sass是什么

sass是一种css预处理语言，由Ruby语言开发，比css多出很多功能（变量、嵌套、运算、混入、继承、指令、函数）更容易阅读
sass的工作方式是，在sass源文件中写代码，然后由sass程序（sass编译器）将其转化成css文件

2.sass和scss 的关系

sass3就是scss与原来的语法相同，只是用{}取代了原来的缩进，更像css写法

3.sass（scss）和less的区别

（1）编译环境不同

• sass需要Ruby环境，日常开发使用sass插件（Live Sass Compiler或其他）（运行在服务器端）

• less需要引入less.js（客户端运行，也就是浏览器运行）

（2）变量符不同

• sass: $color:#000;
• less: @color:#000;

(3)输出风格不同

sass有四种输出风格：

• nested:嵌套缩进的css代码

• expanded:展开的多行的css代码

• compact:简洁格式的css代码

• compressed:压缩后的css代码

4.vscode中使用Live Sass Compiler插件

1. 首先进入vscode插件市场搜索该插件并安装
2. 点击设置-扩展设置-在setting.json中设置如下代码

{
   // 去掉编译时出现的css.map文件
    "liveSassCompile.settings.generateMap": false,

    //设置css兼容性前缀
    "liveSassCompile.settings.autoprefix": [
    
        "ie >= 6", //ie6以上
        "firefox >= 8",
        "chrome >= 24",
        "Opera>=10"
    ],


    "liveSassCompile.settings.excludeList": [
        "**/node_modules/**",
        ".vscode/**"
    ],
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded", // css编译风格
            "extensionName": ".css",  // 编译后的文件类型
            "savePath": "~/../css/"  // css编译后存放的文件目录
        }
    ]
}

3. 安装sass sass-loader依赖

4. 点击vscode右下角Watch Sass

5. 完成

5.sass变量

5.1 sass变量的作用域

• 局部变量
  在选择器内部定义的变量，只能在选择器范围内使用

.container {
    $font-size:14px
    font-size:$font-size
}

• 全局变量
  使用!global标志定义全局变量

.container {
    $font-size:14px !global
    font-size:$font-size
}
.footer {
    font-size:$font-size
}

5.2 sass变量值类型

sass支持6种数据类型

• 数字
• 字符串
• 颜色
• 布尔值
• 空值 null
• 数组 用空格或者逗号做分割
• maps 相当于js中的object

6.sass中@import导入功能

Sass拓展了@import导入功能，允许其导入sass或scss文件，被导入的文件将合并编译到同一个css文件中，另外被导入的文件中所包含的变量或者混入指令（mixin）都可以在导入的文件中使用

@import '文件路径'

7.sass混合指令（Mixin Directives）详解

混合指令（Mixin）用于定义可重复使用的样式，混合指令包括所有的css规则，绝大部分的sass规则，甚至通过参数功能引入变量，输出多样化的样式
7.1 定义与使用混合指令@mixin

• 定义

// 定义一个区块基本的样式(带参数)
@mixin block($top, $right, $bottom,$left) {
  padding-top:$top;
  padding-bottom:$bottom;
  padding-left:$left;
  padding-right:$right;
}

• 使用

// 使用混入
.container{
    .block {
    @include block(10px,20px,30px,40px);
       }
          }

// 使用混入（使用指定参数）
.container{
    .block {
    @include block($left:10px,$top:20px);
       }
          }

8.sass @extend（继承）指令详解

在设计网页的时候，通常会遇到这样一种情况，一个元素使用的样式和另外一个元素一模一样，但又添加了额外的样式，此时，使用继承会是一个不错的选择。

• 继承的使用

.alert {
    font-size:25rpx;
    color:red;
}

.alert-success {
     @extends .alert;
     padding-bottom:10px;
}

• 占位符（%）
  css被继承的父类并没有被实际应用，也就是说HTML并没有使用该类，它唯一的目的就是拓展其他类，对于该类我们并不希望它被编译输出到css文件中，它只会增加css文件大小，并没有实际作用。因此我们可以使用占位符来解决该问题。
  占位符选择器类似于类选择器，但是它是以%开头。在sass中使用占位符选择器时，可以用于拓展其他选择器，但不会被编译到css文件中

% alert {
    font-size:25rpx;
    color:red;
}

.alert-success {
     @extends % alert;
     padding-bottom:10px;
}

9.sass运算（Operations）符的基本使用

9.1等号操作符

// 数字比较
$theme:1;
.container{
  @if $theme == 1 {
     background-color:red;
     }
  }
  @else{
     background-color:blue;
  }

// 字符串比较
$theme:"blue";
.container{
  @if $theme != "blue" {
     background-color:red;
     }
  }
  @else{
     background-color:blue;
  }

9.2 关系（比较）运算符

符号	说明
<	小于
>	大于
<=	小于等于
>=	大于 等于

9.3 逻辑运算符

符号	说明
and	逻辑与
or	逻辑或
ont	逻辑非

9.4 数字运算符

符号	说明
+	加
-	减
*	乘
/	除
%	余

10.sass流程控制指令@if、@for、@each、@while

1. @if():@f()函数允许根据条件进行分支，并返回两种结果中的一种

.container {
   // 第一种
    @if(/* 条件 */){
     // ...
   }

    // 第二种
    @if(/* 条件 */){
     // ...
    }@else{
      // ...
   }

    // 第三种
    @if(/* 条件 */){
      // ...
    }@else if(){
      // ...
   }@else{
      // ...
   } 
}

2. @for指令
   @for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动，
   该指令包含两种格式：@for $var from “<“start”>” through <end">"
   @for $var from <start">" to <end">"

to和through的区别在于：

• 当使用through时，条件范围包含"<“start”>“与 <end”>"的值
• 而使用to条件范围只包含<“start”>“的值不包含 <end”>"的值
• 另外,$var可以是任何变量;"<“start”>“和 <end”>"必须是整数值

11.sass @function的使用

• 函数的作用

把一些比较复杂或者经常使用的内容进行封装，以便于重复使用

• 函数的定义

@function fun([$param1,$param2]){
   ...
   @return $value
}

• 混入mixin和函数function的区别

混入mixin主要是通过传递参数的方式输出多样化的样式，为了可以实现代码复用；
函数的功能主要是通过传递参数后，经过函数内部的计算，最后@return输出一个值；

12.sass@use的使用

作用
从其他sass样式表加载mixin,function和变量，并将来自多个样式表的css组合在一起，@use加载的样式表被称为模块，多次引入仅包含一次，@use也可以看作是对@import的增强
语法

@use  '<url>'