1.导入导出

@import './test.scss'; //导入外部scss文件

2.声明变量

$color:red; //声明变量 $color

3.html往scss传递变量

<div class="colour-display" :style="{'--color': scope.row.colour }">
//scss中
.colour-display {
  background-color: var(--color);
}

4.变量给默认值，可根据需求覆盖

$color:red !default; //声明默认变量 
$color $color:purple; //根据需求覆盖默认变量

5.全局变量和局部变量

全局变量是元素外声明的变量，局部变量是在元素里声明的变量，重复声明时局部变量会覆盖全局变量；

$bgcolor:blue; //全局变量声明不在大花括号内
body { 
    .father01 { //嵌套 
        $bgcolor:purple; 
        //全局变量和局部变量名一致时，调用局部变量进行覆盖 
        background-color: $bgcolor; 
    } 
}

6.局部变量升级为全局变量

局部变量值后加上 !global 关键词可以使得局部变量变成全局变量；

body { 
    .father01 { 
        $border:1px solid red !global; //使用global关键词将$border变为了全局变量 
        border:$border; 
    } 
    .father02 { 
        border:$border; //使用全局变量 
    } 
}

7.变量嵌套引用

即字符串插值，需要使用 #{} 来进行包裹

$left:left;
.father02 {
    border-#{$left}:2px solid purple; //使用字符串插值之前必须先声明
}

8.在嵌套时候可以使用 & 来引用父元素

.container {
   &>p {   //可以编译成CSS的 .container>p {} 效果
      color:purple;
   }
}

9.继承 .class 使用 @extend

.container {
   color:purple;
   border:2px dashed purple;
}
.myText {
   @extend .container; //这里将继承.container类的所有样式
   font-size: 22px;
}

多来一个例子：

.large-text {
    .title {
        color: blue;
        background-color: red;
    }
}
//使用
div {
    @extend .large-text;
    @extend .a;
    padding: 4px;
    margin-top: 10px;
}
.a {
    font-size: 16px; //这里必须有css，不然会找不到.a
        &-hover {  //这里不会被继承
            color: blue
        }
    }
}

10.@mixin

重复代码块，使用混合@mixin命令定义，以及使用@include调用该mixin

@mixin normalStyle {
   //使用@mixin命令定义可重复使用的代码块
   width:300px;
   height:100px;
   color:black;
   background-color:lightblue;
}
.container {
   @include normalStyle;
   //使用@include 命令引用@mixin定义的代码块
}

@mixin传参

在使用@mixin和@include时，传入参数和默认值

@mixin normalStyle($width,$height,$color,$defaultValue:orange) {
   width:$width;
   height:$height;
   color:$color;
   background-color:$defaultValue;
}
.container {
   @include normalStyle(300px,100px,green,lightgray);
}

11.条件语句

.container {
   p {
      @if 1+1<3 {
         border:1px solid blue;
      } @else {
         border:1ps dashed palevioletred;
      }
   }
}

12.for循环

//for 循环 
@for $i from 1 to 5 { 
    .item-#{$i} { 
        border:#{$i}px solid; 
    } 
}

13.while 循环

$m:8; 
@while $m > 0 { 
    .items-#{$m} { 
        width:2em*$m; 
    } 
    $m:$m - 2;
}

14.each in循环

//each 语法 
@each $item in class01,class02 { 
    //$item就是遍历了in关键词后面的类名列 
    .#{$item} { 
        background-color:purple; 
    } 
} 
//会编译成 
.class01 , .class02 {
    background-color:purple;
}

多来一个例子：

@each $var in(left,center,right){
    .text-#{$var}{
        text-align:$var;
    }
}

编译后：

.text-left{
    text-align:left;
}
.text-center{
    text-align:center;
}
.text-right{
    text-align:right;
}

15.@function 自定义函数及使用

@function vw ($px) { // $px 形参（参数） 
    // @return 返回值 结束函数 
    @return ($px / 750) * 100vw; 
}
.myText {
   border:1px solid red;
   width:vw(200); //使用在SCSS中自定义的函数
}

16.SCSS内置的颜色函数

.myText {
   color:black;
   &:hover{
      //以下的lighten()、darken()等是SCSS内置的颜色函数
      color:lighten(#cc3, 10%); // #d6d65c颜色变浅
      color:darken(#cc3, 10%); // #a3a329颜色加深
      color:grayscale(#cc3); // #d6d65c
      color:complement(#cc3); // #a3a329
   }
}

17.运算与数据类型

scss支持js的运算

数字运算， +, -, *, /, %

关系运算 <, >, <=, >= ==, !=

布尔运算 and or not，

数组 用空格逗号隔开都可以称为数组 1 2 或者 1,2 ( )代表空数组

字符串，有引号字符串与无引号字符串，"foo", 'bar', baz

数字，1, 2, 13, 10px

18.maps

相当于 JavaScript 的 object，(key1: value1, key2: value2)

$social-colors: (
    facebook: #3b5998,
);
//假设要获取 facebook 键值对应的值 #3b5998，我们就可以使用 map-get() 函数来实现：

.btn-dribble{
  color: map-get($social-colors,facebook);
}
//编译后
.btn-dribble {
  color: #3b5998;
}