Sass（Scss）使用看这一篇就够Sass最常用的语法 Scss和Sass是同一门语言的不同版本，Sass是早期版本

Sass最常用的语法

Scss和Sass是同一门语言的不同版本，Sass是早期版本

变量

在js中定义变量一般使用let，const，var来声明
而在sass中，只要变量以 $开头即可，比如$ themeColor。
变量的值是任何可以作为css属性的值
- 示例1：$themecolor: rgba(0,0,255,.5);
- 示例2：$myborder: 1px solid #aaa;

混入

如果你使用过vue框架，对混入应该有所了解，vue中的混入是为了复用组件定义选项
而在sass中，是为了复用样式，比如一份需要重复编写的样式，可以通过混入来简化
在sass中的混入，可以类比成js的函数，只是用@mixin来声明，而不是function
- 使用@mixin声明 @mixin mymixin () {}
- 混入可以接收参数，前文说过所有的变量要被sass识别就必须以 $开头，即$ myparams
- 在语句体中，我们可以书写需要混入的sass或css样式
```
@mixin mymixin ($myparams){
  border: 1px solid #aaa;
}

通过关键字@include来使用混入
#id {
    @include mymixin(0);
}
```

嵌套

纯css语法，我们使用选择器选中元素，编写样式时，不同的选择器之间必须是平级，不能嵌套
而sass语法，支持以html标签的嵌套层级来书写css样式
示例如下：

<template>
    <div id="container">
        <main id="content">
            <article id="article">
                我是范文
            </article>
        </main>
    </div>
</template>
<style lang="scss">
    #container {
        width: 100%;
        #content {
            height: 100px;
            #article {
                font-size: 28px;
                color: red;
            }
        }
    }
</style>

@if @else if @else

在js中我们通过if else分支语句来执行不同的逻辑
而在sass中，也支持这几种语法，比如在@mixin的语句块中就可以使用以上指令
语法即，使用@if 后跟条件判断，以及要执行的语句，与js写法一致

@if $myvar == min {
    width: 15px;
}
@else if $myvar == max {
    width: 150px;
}
@else {
    width: 80px;
}

@for和@each,$while

在js中，我们使用for,forEach来循环执行某些操作
而在sass中，也支持这种写法，只是具体写法有所不同

@for $j from 1 to 4 {
  .text-#{$j} {
    font-size: $j*10;
  }
}

/** @for是关键字
 *  $j 是变量
 *  from是变量的起始值
 *  to是变量的结束值，可换成through，则包含结束值
 *  #{ $j } #{}是在sass中在字符串中使用变量的方式，类似于js中的${}
 *  以上的循环我们实现了生成text-1到3的类选择器，以及每个选择器中的字体以10倍扩大
 */
 
 @each $i in 1,2,3 {
     .text-#{$i} {
         font-size: $i*10;
     }
 }
 
 /** @each是关键字
 * $i 是变量
 * in 类似与js中的for ... in ...
 * in之后的内容可以是逗号间隔的类数组，也可以是类对象如，$c: (a:1,b:2,c:3);
 * 注意：类对象使用的是小括号，key不需要以$开头
 */
 $k: 1;
 @while $k < 4 {
     .text-#{$k} {
         font-size: $k*10;
     }
 }
 /** @while是关键字
 * $k是变量
 * 写法类似js
 * 实现的功能三种方式是一致的
 */

Partials

在js中我们有模块化的概念，各模块间通过各种模块标准来导入互相引用
而在sass中，也可以使用@import来实现sass文件的互相引用
partials是sass中独有的概念，它表示单独的sass文件在编译时不需要生成单独的css，而是作为引入位置的sass文件的一部分。
partials文件的创建需要注意以下几点：
- 文件名必须以_开头
- 使用@import导入时，文件名需要去掉_以及扩展名sass或scss
- 注意以上只针对partials，如果是普通的sass文件互相导入，则按按正常的导入方式即可

<!--main.sass-->
// 导入partials
@import "mypartials";
// 导入sass
@import "mysass.sass";

扩展

在js中我们的extends一般是指继承类，在vue中的extend是扩展组件的
而在sass中，extend是用来扩展样式的
比如我们已有一个选择器a，新的选择器b会用到a的所有样式，但是还有一些额外的样式需要设置，此时就可以使用extend来扩展a

.a {
    width: 100%;
    font-size: 16px;
}

.b {
    @extend .a;
    height: 100px;
    background-color: red;
}

总结

变量定义以$开头
所有的指令以@开头
变量值使用原生css值
以上内容可以满足日常开发，如果有特殊需求，可以参考官网