SASS 语法基本概念

SASS

SASS (Syntactically Awesome Stylesheets Sass) SASS是一套利用Ruby实现的，最早最成熟的CSS预处理器，诞生于2007年。它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套函数和运算等特性，使 CSS 更易维护和扩展。

​ LESS是一套利用JavaScript实现的CSS预处理器，诞生于2009年。 由于LESS的诞生比SASS要晚，并且LESS受到了Sass的影响，所以在LESS中能看到大量SASS中的特性。所以只要学会了LESS就等同于学会了大部分的SASS。

---

LESS和SASS区别

• LESS以 .less 结尾，SASS以.sass或者 .scss 结尾

.sass结尾以 缩进 替代{}表示层级结构, 语句后面不用编写分号
.scss以{}表示层级结构, 语句后面需要写分号,推荐.scss结尾

---

注释

单行注释不会被编译(不会出现在编译后的文件中)；多行注释会被编译 (会出现在编译后的文件中)

---

变量

SASS中定义变量: $变量名称: 值;

注意点：LESS中变量是延迟加载, 可以先使用后定义； SASS中变量不是延迟加载, 不可以先使用后定义

---

变量插值

LESS变量插值格式： @{变量名称}

SASS变量插值格式：#{$变量名称}

---

运算

SASS中的运算和LESS也一样, 都支持 + - * / 运算，注意点: 无论是LESS中的运算还是SASS中的运算都需要加上()。

margin-left: (-200px - 55);

---

混合

LESS中混合定义: .混合名称{} 或者 .混合名称(){}

LESS中混合调用: .混合名称; 或者 .混合名称();

SASS中混合定义: @mixin 混合名称{}; 或者 @mixin 混合名称(){};

SASS中混合调用: @include 混合名称; 或者 @include 混合名称();

@mixin center(){
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.father{
   300px;
  height: 300px;
  background: red;
  @include center();
}

---

可变参数

SASS中的可变参数和LESS中也一样，只不过由于SASS不是使用JS实现的，所以不能直接在混合中使用arguments， 必须通过 $args...的格式来定义可变参数，然后通过$args来使用。

@mixin animate($name, $time, $args...){
  transition: $name $time $args;
}
div{
   200px;
  height: 200px;
  background: red;
  @include animate(all, 4s, linear, 0s);
}

---

SASS导入其它sass文件

和LESS一样SASS文件中也支持导入其它SASS文件，其实原生的CSS也支持通过@import导入其它的CSS文件, 只不过不常用，不常用的原因在于原生的@import导入其它的CSS文件，只有执行到@import时浏觅器才会去下载对应 css文件，这导致请求次数变多,页面加载起来特别慢。而LESS和SASS中的@import是直接将导入的文件拷贝到当前文件中生成一份CSS, 所以只会请求一次, 速度更快。

---

内置函数

// 字符串函数
unquote（$string）：删除字符串中的引号；
quote（$string）：给字符串添加引号；
To-upper-case（$string）：将字符串小写字母转换为大写字母
To-lower-case（$string）：将字符串大写字母转换为小写字母
// 数值函数
percentage($value)：将不带单位的数转换成百分比值；
round($value)：将数值四舍五入，转换成一个最接近的整数；
ceil($value)：向上取整；
floor($value)：向下取整；
abs($value)：取数的绝对值；
min($numbers…)：找出几个数值之间的最小值；
max($numbers…)：找出几个数值之间的最大值；
random(): 获取随机数
// 颜色函数
rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色；
rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色；
red($color)：从一个颜色中获取其中红色值；
green($color)：从一个颜色中获取其中绿色值；
blue($color)：从一个颜色中获取其中蓝色值；
mix($color-1,$color-2,[$weight])：把两种颜色混合在一起。
// 列表函数
length($list)：返回一个列表的长度值;
nth($list, $n)：返回一个列表中指定的某个标签值;
join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表；
append($list1, $val, [$separator])：将某个值放在列表的最后；
zip($lists…)：将几个列表结合成一个多维的列表；
index($list, $value)：返回一个值在列表中的位置值。

---

层级结构

和LESS一样支持嵌套，默认情况下嵌套的结构会转换成后代选择器，和LESS一样也支持通过&符号不转换成后代选择器。

---

继承

SASS中的继承和LESS中的继承一样，都是通过并集选择器来实现的，只不过格式不一样而已。

混合和继承区别：

混合是直接拷贝, 有多少个地方用到就会拷贝多少份；继承是通过并集选择器, 不会拷贝只会保留一份。

.center{
  left: 50%;
  top: 50%;
}
.father{
  @extend .center;
   300px;
  height: 300px;
}
/*
	.father:extend(.center){}
*/

---

条件判断

和LESS一样SASS中也支持条件判断，只不过SASS中的条件判断支持得更为彻底。

SASS中支持
@if(条件语句){}
@else if(条件语句){}
... ...
@else(条件语句){}
SASS中当条件不为false或者null时就会执行{}中的代码
和LESS一样SASS中的条件语句支持通过> >= < <= ==进行判断

@mixin triangle($dir, $width, $color){
   0;
  height: 0;
  border- $width;
  border-style: solid solid solid solid;
  @if($dir == Up){
    border-color: transparent transparent $color transparent;
  }@else if($dir == Down){
    border-color: $color transparent transparent transparent;
  }@else if($dir == Left){
    border-color: transparent $color transparent transparent;
  }@else if($dir == Right){
    border-color: transparent transparent transparent $color;
  }
}
div{
  @include triangle(Left, 50px, blue);
}

---

循环

SASS比LESS牛逼的地方就在于SASS中直接支持循环语句，而LESS中需要通过混合+条件判断自己实现

for循环
    @for $i from 起始整数 through 结束整数{}
    @for $i from 起始整数 to 结束整数{}
    两者的区别 through包头包尾, to包头不包尾

while循环
    @while(条件语句){}

ul{
  li{
     100%;
    height: 50px;

    $i:5;
    @while($i <= 8){
      &:nth-child(#{$i}){
        background: deepskyblue;
      }
      $i:$i+1;
    }
  }
}