sass

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提醒在输出结果