CSS预处理器之SASS - 遇明不散

LESS和SASS文件后缀名区别

LESS以


    .less

结尾

SASS以


    .sass

或者


    .scss

结尾


    .sass

结尾以缩进替代

{}

表示层级结构, 语句后面不用编写分号


   .scss

以

{}

表示层级结构, 语句后面需要写分号

企业开发中推荐使用


    .scss

结尾

https://www.sass.hk/docs/

SASS注释

SASS中的注释和LESS一样

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

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

SASS变量

SASS中的变量和LESS中一样, 只是定义格式不同

SASS中定义变量：


    $变量名称: 值

;

SASS中变量后定义的覆盖先定义的

SASS中可以把变量赋值给其它变量

SASS中区分全局变量和局部变量(访问采用就近原则)

SASS中变量不是延迟加载, 不可以先使用后定义

SASS变量插值

SASS中的变量插值和LESS中也一样, 只不过格式不一样

SASS变量插值格式：


    #{$变量名称}

SASS运算

SASS中的运算和LESS也一样, 都支持加、减、乘、除运算

无论是LESS中的运算还是SASS中的运算都需要加上

()

SASS混合

SASS中的混合和LESS中也一样, 只是定义格式和调用的格式不同

SASS中混合定义:


    @mixin 混合名称{}

; 或者


    @mixin 混合名称(){}

;

SASS中混合调用:


    @include 混合名称

; 或者


    @include 混合名称()

;

SASS带参数混合

SASS中带参数的混合和LESS中一样

不带默认值形参

带默认值形参

给指定参数赋值

SASS可变参数

SASS中的可变参数和LESS中一样

由于SASS不是使用JS实现的, 所以不能直接在混合中使用


    arguments

,必须通过


    $args...

的格式来定义可变参数, 然后通过


    $args

来使用

可变参数必须写在形参列表的最后

SASS中的导入其它sass文件

和LESS一样SASS文件中也支持导入其它SASS文件

格式：


    @import "sass文件"

原生的CSS也支持通过


    @import

导入其它的CSS文件, 只不过不常用不常用，原因在于原生的


    @import

导入其它的CSS文件,只有执行到


    @import

时浏觅器才会去下载对应css文件，这导致请求次数变多,页面加载起来特别慢。而LESS和SASS中的


    @import

是直接将导入的文件拷贝到当前文件中生成一份CSS, 所以只会请求一次, 速度更快。

SASS内置函数

字符串函数

// 删除字符串中的引号
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);
SASS自定义函数
// 定义函数
@function square($num){
    retuen $num * $num + px;
// 调用函数
  width: square(10);
  height: square(10);
SASS层级结构
默认情况下嵌套的结构会转换成后代选择器
通过&符号不转换成后代选择器
SASS继承
继承是通过并集选择器, 不会拷贝只会保留一份
.common{
  width:200px;
.father{
  extend .common;
SASS条件判断
SASS中也支持条件判断, 和LESS相比，SASS中的条件判断支持得更为彻底
@if(条件语句){}
@else if(条件语句){}
... ...
@else(条件语句){}
SASS循环
for循环
// 包头包尾
@for $i from 起始整数 through 结束整数{}
// 包头不包尾
@for $i from 起始整数 to 结束整数{}
while循环
@while(条件语句){}