2021年2月份有学习完一个SCSS系统教程，现在回顾复习一下当时学习的记录总结。

基础入门笔记总结

目录
- 1.sass和scss的区别
- 2.声明变量
- 3.嵌套
- 4.混合
- 5.继承
- 6.import 和 partials
- 7.注释
- 8.数据类型
- 9.运算
- 10.数字函数
- 11.字符串拼接
- 12.颜色
- 13.列表
- 14.map类型
- 15.布尔值
- 16.interpolation
- 17.控制指令 @if,@each,@for,@while
- 18.用户自定义函数
- 19.警告和错误

因为css会带单位，所以有单位与纯数字运算会保留一个单位，加法和减法比较是预期的单位，乘法和除法需要注意，除法不加括号会当字符串不运算，除法可以加括号，两个带单位的乘法会先进行数字运算再出来两个单位，不符合预期，也需要特别注意一下
两个变量运算时，运算符需要用空格隔开，否则可能不生效

10.数字函数

abs():求绝对值
round():四舍五入最接近的整数取整
ceil(): 向上取整
floor(): 向下取整
percentage(): 转为百分数，传0.5就会输出50%

11.字符串拼接

通过"+",可以拼接字符串，有引号的最后也会通过引号输出，“-“和”/“连接字符串时会连接两个字符串后还保留自身”-“和”/“字符串，”*"直接报错

字符串函数

to-upper-case(str):转大写，要传字符串，“”+“#ff0089"可以将颜色值转为字符串
to-lower-case(str)：转小写，要传字符串，”“+”#ff0089"可以将颜色值转为字符串
str-length(originStr)：求长度 str-index(originStr,subStr)：找某个字符串位置
str-insert(originStr,subStr,location)，在某个位置插入字符串

12.颜色

提亮颜色 lighten
加深颜色 darken

$primary-color: #ff0089;//颜色提亮和加深
.light {background: lighten($primary-color,30%)
}.dark {// border: 1px solid $primary-color;background: darken($primary-color,30%);
}

原来颜色 #ff0089

提亮 30%

加深 30%

saturate: 增加纯度，即增加饱和度
desaturate: 减少纯度，即减少饱和度

$saturate-color = saturate($primary-color,50%);
$desaturate-color = desaturate($primary-color,50%);

opacify: 减少透明度
transparentize: 增加透明度

$tranparent-base: rgba(0,255,255,.3);.opacify {background: opacify($tranparent-base,0.2);
}.transparentize {background: transparentize($tranparent-base,0.2);
}

13.列表

可以通过逗号，空格或小括号来表示列表，类似于js的数组

//声明一个列表
$list:(10,20,30);//长度
length($list) // 返回3//访问第一个列表元素
nth($list,1) // 返回10
nth($list,2) // 返回20
nth($list,3) // 返回30//获取某个值的下标位置
index($list,10) //返回1//插入
append($list,40) // 返回 (10,20,30,40)//连接两个列表
join($list,(40,50))//连接并通过分隔符输出
join($list,(40,50),space); //已空格输出
join($list,(40,50),comma); //已逗号输出

14.map类型

类似于js中的对象，有key和value

//声明
$map : (light: #ffffff,dark: #000000);//查看个数
length($map); //返回2//获取某个key的值
map-get($map,light); //返回#ffffff//获取所有的keys
map-keys($map); //返回 light,dark//获取所有的values
map-values($map); //返回 #ffffff,#000000//判断是否含有某个值
map-has-key($map,light); //返回true
map-has-key($map,blue); // 返回false//合并
map-merge($map,(blue:#007acc)); // 返回(light: #ffffff, dark: #000000, blue: #007acc)//移除
map-remove($map,light); //返回(dark: #000000)，原来的$map对象的值没变

15.布尔值

跟js中的类似，但逻辑运算这边使用的是单词，与或非分别用 and or not来表示，使用not时表达式通过括号包起来。

使用not时表达式要用括号包起来

16.interpolation

类似于vue中的插值，可以引入表达式的值，通过#{}引入，可以将变量的值使用在css的属性中进行拼接

17.控制指令 @if,@each,@for,@while

跟js中类似，表达式不用括号再通过花括号包起来，值得注意的是，@for有2种方式，@for … throuth包括右侧临界点，@for…to不包括右侧临界点，少一次循环，@each跟js的forEach类似,使用@while记得控制结束的表达式

@if $theme == green {body {background: green;}
}@for $item from 1 to 13 {col-md-#{$item} {font-size: percentage(1/12*$item);}
}@for $item from 1 through 12 {col-xs-#{$item}{font-size: percentage(1/12*$item);}
}
$list:(1,2,3,4);
@each $item in $list{.col-#{$item} {font-size: $item;}
}
$item:1;
@while $item <= 10 {.col-while-#{$item} {width: percentage(1/$item);}$item:$item +1;
}

18.用户自定义函数

跟混合的区别在于函数可以写更多自己想要的逻辑，而且可以有返回值

$color: #ff0089;
@function toUpper($value){@return to-upper-case($value+"");
}
body {background: toUpper($color);
}

19.警告和错误

通过@warn “” 和 @error 可以提示警告和错误，会反应在开发环境控制台，error还会反应在生成的css中

@warn "这是警告";
@error "这是错误";