SASS
什么是SASS
- SASS是一套利用Ruby实现的, 最早最成熟的CSS预处理器, 诞生于2007年.
- SASS扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展
- 由于LESS的诞生比SASS要晚, 并且LESS受到了Sass的影响, 所以在LESS中能看到大量SASS中的特性,所以只要学会了LESS就等同于学会了大部分的SASS
LESS和SASS文件后缀名区别
- LESS以
.less结尾 - SASS以
.sass或者.scss结尾-
.sass结尾以缩进替代{}表示层级结构, 语句后面不用编写分号 -
.scss以{}表示层级结构, 语句后面需要写分号 - 企业开发中推荐使用
.scss结尾
-
学习文档
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;
}
// 调用函数
div{
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(条件语句){}
网友评论