scss常用语法

变量 $

变量的定义以$开头，某个变量的作用域仅限于他们定义的层级以及子层级。如果变量是定义在所有嵌套选择器之外的，那么他们可以在各处被调用。

$col:#ccc
.div{
background-color:$col
}
相当于
.div{
background-color:#ccc
}

如果希望某个在子选择器中定义的变量能够成为全局变量，可以使用!global关键字：

#main {
 $width: 5em !global;
  width: $width; 
}
  
#sidebar { width: $width; }

嵌套引用

在scss中的 样式 是可以像dom那样进行嵌套的

嵌套引用在其他编程语言中即是字符串插值，需要用#{}进行包裹：

$left:left; .div1{ border-#{$left}-width:5px; }

变量计算

变量可以支持计算的类型，还是比较多的：

.box {
weight: 75px/37.5px
}

选择器
嵌套

.div1{ .span1{ height: 12px; } .div2{ width: 16px; } }

属性也可以嵌套，比如border-color属性，可以写成：

　　p { 
　　　border: { 　　　　　　color: red; 　　　　} 　
　　}

注意，border后面必须加上冒号。

父元素引用 &

在嵌套的子层级中，允许使用&引用父元素：

.div1{ &:hover{ cursor: hand; } }

继承 @extend

SASS允许一个选择器，继承另一个选择器。比如，现有class1：

.class1{ font-size:19px; }
 .class2{ @extend .class1; color:black; }

注意：如果在class2后面有设置了class1的属性，那么也会影响class2，如下：

.class1{ font-size:19px; } 
.class2{ @extend .class1; color:black; } 
.class1{ font-weight:bold; }

由此可以看出Scss也是递归编译的。

引用外部css文件（Partials）@import

有时网页的不同部分会分成多个文件来写样式，或者引用通用的一些样式，那么可以使用@import。

@import "_test1.scss";
 @import "_test2.scss"; 
 @import "_test3.scss";

Mixin&Include混入

Mixin有点像C语言的宏（macro），是可以重用的代码块。

使用@mixin命令，定义一个代码块。

@mixin left { 　
　　float: left; 　　
　　margin-left: 10px; 
}

使用@include命令，调用这个mixin。

div {  @include left; }

/* 暂时不携带参数 */
@mixin public{
    width:50px;
    height:50px;
    background:red;
}

/* 引用 Mixins模块 */
div{
    @include public;
}

编译为css
div {
  width: 50px;
  height: 50px;
  background: red; 
}

混入也还可以包含选择器和属性的混合体，选择器中甚至可以包含 parent references（父选择器）：

/* 混合体：选择器/嵌套属性/父选择器 */
@mixin public{
    &:hover{
        font:{
            family: '微软雅黑';
            size: 14px;
            weight: bold;  
        }
    }
    *{
        border-radius: 10px;
    }
}

/* 引用 Mixins模块 */
div{
    @include public;
}

编译为css

div:hover {
  font-family: '微软雅黑';
  font-size: 14px;
  font-weight: bold; 
}

div * {
  border-radius: 10px; 
}

混入在文档的根

混入(@mixin)可以包含在任何规则的外(即，在文档的根)，前提是它们不直接定义的任何属性或使用任何父选择器引用：

/* 模块 */
@mixin demo{
    div{
        width:50px;
        height:50px;
        background:rgb(255,255,0);
    }
}

/* 文档根调用 */
@include demo;

拿如上代码来谈，如果没有 div 套着这些属性规则，就中了上面加粗文字【不直接定义的任何属性】这条规则，肯定就会报错，

携带参数

不难发现，前面所有例子从未携带过参数(Arguments)，我相信初学者已经感受到 Sass 的强大了。

当定义一个混入(@mixin)的时候，参数被作为变量名，写到混入(@mixin)名字后面的括号内，多个参数可以用逗号分隔，当调用混入的时候，值通过对应的参数顺序被传递。
解释：混入(@mixin)可以用 SassScript 值作为参数，给定的参数被包括在混入(@mixin)中并且作为为变量提供给混入(@mixin)使用。

/* 携带参数 */
@mixin demo($width,$height,$bg){
    width:$width;
    height:$height;
    background:$bg;
}

/* 调用 */
div{
    @include demo(50px,50px,rgb(255,0,0));/*传值*/
}

编译为CSS：

div {
  width: 50px;
  height: 50px;
  background: red; 
}

同样可以使用普通的变量赋值语法为参数指定默认值，当调用混入时如果没有给参数赋值，则自动会使用默认值代替：

/* 携带参数 */
@mixin demo($width,$height,$bg:rgb(255,0,0)){
    width:$width;
    height:$height;
    background:$bg;
}

/* 调用 */
div{
    @include demo(50px,50px);/*省略颜色,使用默认值*/
}

更多混入参考https://blog.csdn.net/weixin_44198965/article/details/101116827

流程控制

条件语句

@if可以用来判断：

p {
 　　@if 1 + 1 == 2 { border: 1px solid; }
 　　@if 5 < 3 { border: 2px dotted; } 　
　}

配套的还有@else命令：

@if lightness($color) > 30% {
 　　　　background-color: #000; 　　
 　} @else { 　　
 　　　background-color: #fff; 　
 　　　　}

循环语句

SASS支持for循环：

　　@for $i from 1 to 10 {
　　 　　　　.border-#{$i} { 　border: #{$i}px solid blue; 　　　　} 　
　　 　　　　　}

也支持while循环：

$i: 6;
@while $i > 0 { 
　　　　.item-#{$i} { width: 2em * $i; } 　　
　　　　　　$i: $i - 2; 　　
　　　　　　}

each命令，作用与for类似：

　　@each $member in a, b, c, d {
					　　 　　　　.#{$member} { 　　
					　　 　　　　　　　　background-image: url("/image/#{$member}.jpg"); 　
					　　 　　　　　　　　} 
　　 　　　　　　　　　　			}

函数
Sass允许用户自定义函数，原型如下所示：

　　@function double($n) {
　　 　　　　@return $n * 2; 　　
　　 　　　　} 　
 　#sidebar { 　　　　width: double(5px); 　　}

颜色函数
SASS提供了一些内置的颜色函数，以便生成系列颜色。

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080 
complement(#cc3) // #33c