windows首先安装ruby(非专业sasser请忽略)
认识.scss
.scss和.sass的区别
变量 $
普通嵌套
嵌套 &:hover
嵌套 属性值
mixin
mixin的参数
继承/拓展inheritance
@extend
Partials和@import 加入下划线即不可解析为CSS,使用时可用@import引入
注释/**/ /*! */ // 的区别
Data Type
Number严谨的数学逻辑
相关函数——abs(绝对值),round(四舍五入),ceil(进一位),floor(退一位),percentage(百分数),min(取最小数),max(取最大数)
String + - * /
String函数——$greeting 定义变量 ,to-upper-case()变大写,to-lower-case()变小写,str-length()字符串长度,str-index(字符串,字符串内需要检查的值)返回第一个字符所在的位置,索引从1开始,
str-insert(原字符,要插入的字符,插入的位置)
Color
rgb (255红,0绿,0蓝),rgba(红,绿,蓝,透明度0-1),hsl(色相0-360,饱和度%,明度%),hsla(色相0-360,饱和度%,明度%,透明度0-1),16进制#FFFFFF
adjust-hue(调整前的颜色,要调整到的色相)——调整色相
lighten与darken改变颜色的明度 50%+30% 50%-20%
saturate与desaturate改变颜色的饱和度 50%+50% 50%-30%
transparentize - 变得透明 ,opacify + 变得不透明——修改颜色a(透明度)的值
List
空格分开
逗号分开
两个列表逗号分开
两个列表括号分开
列表函数
length()列表长度 , nth(列表,项目位置)得到列表项 , index(列表,项目)判断项目位置 , append(列表,插入项)在列表中插入项目 ,
join(列表A,列表B)结合列表 , join(列表A,列表B,comma)得到的列表逗号分割所有项
map类型数据——length($map)查看项目数, map-get($map,key1项目名字)根据项目名字得到对应的值 , map-keys($map)查看所有项目名字 , map-values($map)查看项目所有的值,
map-has-key($map,项目名字)查看map里是否有该项目,返回ture或false , map-merge($mapA,$mapB)合并map , map-remove($map,移除的项目,移除的项目)移除map里的项目,多个项目逗号分隔
Boolean布尔值 严格遵守编程范式
interpolation形式 $aaaa:12132; 使用 #{$aaaa}
控制指令control directives
If
for(through会包含结束值,to不包含结束值)
each
while
function
@warn警告会在命令行,@error提醒在输出结果