scss语法介绍

这里既然是对语法的介绍，那么至于如何安装和编译scss我就不多少了，主要是因为本人在群里认识的小伙伴有的不会用scss，所以就借着放假的机会来对scss语法做个总结，博主在开发过程中用scss蛮多，所以对scss语法还是熟知的。

---

1.自定义变量

$color:pink;.test1{    background-color:$color;}

通过编译工具编译出来后

.test1{    background-color:pink;}

注：时间原因我在这里只写scss了，就不写编译后的结果，一来方便大家自己去尝试编译，二来增加大家对scss的理解：编译工具kaola很好的一个编译工具，大家可以百度如何使用，再这里就不做过多介绍了。
***
2.插入一个变量

$right:right;.test2{    border-#{$right}:1px solid #000;}

3.子元素书写

.text3{    .text33{        border:1px solid;    }   }

4.样式的加减乘除

$paramer:3;.text4{    height:(1px+3px);    width: (96px/6);    right: $paramer*4;}

5.继承

.class5{    border:1px solid red;}.class5E{    @extend .class5;    font-size:20px;}

6.代码块的复用

@mixin text6 {    height:50px;    left:20px;}.text6M{    @include text6}//这里的mixin就是定义一个可以复用的代码段，当然我们也可以给它传递一个参数，就像这样一样：@mixin text66($height){    height:$heigth;    left:20px;}.text6N{    @include text66(100px);}   

7.if语法，通过对if的判断来决定使用那一套样式

.text7{    @if 1 +2 == 3 {        border:1px solid ;    }    @if 5 < 3 {        border:2px dsahed red;    }}当然，我们都知道if一般是要和else配合的，所以我们也可以这样写.test77{    @if lightness($color) > 30%{        background-color:#fff;    }@else{        background:#0ff;    }}这里的lightness是一个scss颜色函数，$color指向之前定义的值。

8.循环语法，包括最常见的三种循环方法，for,while,each

//for 循环@for $i from 1 to 5 {    .item-#{$i} {        border:#{$i}px solid;    }}//while 循环$m:8;@while $m > 0 {    .items-#{$m} {        width:2em*$m;    }    $m:$m - 2 ;}//这里可以对$m进行运算 让它每次都减去2//each 语法@each $img in q,w,e,r {    .#{$img} {        background-image:url('#{$img}.png')    }}

9.函数语法

@function double ($number){    @return $number*2;}.text9{    font-size:double(20px);}

10.import导入语法

@import 'other.scss'这样就在你现在的scss中导入了other.scss编写的scss

scss语法并不是很多，但是需要开发者灵活使用，这样才能事半功倍，要深刻理解scss变量，以及如何插入变量，以及循环语法和函数思想，如果遇到不太清楚的可以给博主留言哈，欢迎指正和提出问题。