1.输入chrome://flags/ 开启开发者工具实验性功能，之后重启浏览器
2.打开开发者工具，网页右击，选择检查（ctrl+shift+I）
3.设置开发者工具：
选中：
4.在开发者工具打开下，选择有id或class的标签
选择对应scss文件直接可以调试编辑
5.这时无法修改和保存scss文件需要设置工作目录：
右击souress下空白，选择：
允许：
这时会多出一个文件夹：
这时网页文件和文件目录没有联系，需要关联两种方法：
1.网络关联本地
然后选中对应文件，这时网络文件消失可以直接编辑本地：
1.@import 文件引入
可以引入sass或scss文件，被引入文件中定义的变量或mixins都可以在主文件中使用，默认引用当前目录，也可以同时引入多个文件，如果被引入文件没有扩展名，会自动加上扩展名搜寻当前目录。
编译为：
如果一个文件需要被引入，但又不希望其被编译为css文件，可以在文件名前加_,如_test.scss，这样被引入后，_test.scss文件内容就不会被编译为test.css文件。同一目录下不允许出现同一个带有_同名文件。
编译为：
@import一般在顶层，但是其允许被嵌套。
编译为：
2.@media 指定样式表规则用于指定的媒体类型和查询条件，允许嵌套，可以使用#{变量名}来指定设备类型和条件
@media 设备类型 and (查询条件)
编译为：
嵌套：
编译为：
3.extend 用来扩展选择器或占位符，可以减少输入代码量。可以同时继承多个样式
编译后：
占位符：
不调用：
如果不使用extend编译后，不产生代码
调用：
编译后：
4.@at-root 跳出根元素，不被父元素包含
编译后：
5.@debug 用来做调试，如果编译出错，在命令终端会输出设置的提示信息，编译时产生
6.@warn 警告信息 编译时产生
@warn “警告信息”;
7.@error 错误信息;编译时产生，测试成功
@error “错误信息”
编译为：
在sass终端下使用以下命令可以进入函数计算模式：
sass -i
RGB颜色由红，绿，蓝 三色构成
一.RGB颜色函数
1.rgb() 返回一个16进制颜色数值
直接输入rgb(200,40,88),返回16位颜色数值
2.red() 获取一个颜色中的红色值
3.green() 获取一个颜色中的绿色值
4.blue() 获取一个颜色中的蓝色值
5.mix() 将两种颜色根据一定的比例混合在一起，返回一个新颜色
mix($color1,$color2,$weight)
$color1和$color2是需要合并的颜色，可以bc
$weight 是合并比例，取值为0-1之间的小数，默认是50%，为两种颜色各占一半，如果是20%，第一种颜色为20%，第二种颜色为80%
编译为：
二.HSL颜色函数
1.lighten()和darken() 改变颜色的亮度值，当颜色的亮度值接近或大于 100%，颜色会变成白色；反之颜色的亮度值接近或小于 0 时，颜色会变成黑色。
lighten($color,亮度值)
变亮，亮度值为0-1的小数
darken($color,亮度值)
变暗，亮度值为0-1的小数
编译为：
2.saturate()和desaturate()改变颜色的饱和度，返回一个新颜色
saturate($color,饱和度)
增加饱和度
desaturate($color,饱和度)
减少饱和度
编译后
3.abjust-hue()调整颜色的色相，返回一个新颜色
abjust-hue($color,色相度)
色相度是：-360deg到360deg之间，当超过360时，取数值-360，当小于-360时，取+360的值
编译后：
4.grayscale()将颜色的饱和度调为0 于函数desaturate($color,100%)功能相同，一般这个函数用来把彩色转为不同程序的灰色。
grayscale($color)
三.透明度函数：
1.opacity()和alpha() 获取颜色透明度值，如果没有指定透明度，一般都为1
opacity($color)
alpha($color)
编译为：
2.rgba()将一个颜色根据透明度转换成rgba颜色。主要用来设置透明度
rgba(color,透明度)
color是一个颜色值
透明度是0到1的小数
编译为：
3.opacify()和fade-in()函数（同fade_in()），对透明度做加法运算，返回一个新颜色，更加不透明
opacify($color,参数2)
fade-in($color,参数2)
参数2取0-1的数，当透明度大于1时完全不透明
编译为：
4.transparentize()和fade-out() 让透明度相减，更家透明,返回一个新颜色
transparentize($color,参数2)
fade-out($color,参数2)
编译为：
sass map 是一个数据集合，常用来批量管理变量
$地图名:(键名1:键值,键名2:键值2,键名3:键值3….)
map常用函数：
(1)map-get() 函数 返回指定键值
map-get($map,$key)
$map是地图名
$key是键名
如果$key不存在于map,那么返回值为空
编译为：
(2)map-has-key()判断一个key是否存在于map中
map-has-key($map,key)
如果存在，返回true,如果不存在返回false.
编译为：
也可放要条件判断中：
编译为：
也可以用在自定义函数中：
编译为：
(3)map-keys() 返回列表中所有的key，值为列表
map-keys($map)
编译为：
可以通过此命令遍历出map中所有的值：
编译为：
(4)map-values()返回所有值，值为列表。
map-values($map)
编译为：
(5)map-merge()合并两个map,值为map
map-merge($map1,$map2)
编译为：
(6)map-remove() 删除map中的一个key,得到一个新map,不能删除map中的map,只能删除一个key，如果被删除的key不存在于map中，那么返回一个相同的map
编译为：
(7)keywords($args) 动态创建map，待补充
1.length()返回列表项的个数。如果在参数中直接写入列表项，需要使用空格分隔，不能使用逗号。
编译为：
2.nth() 指定列表中的某个值
nth($list,$n)
$list:列表名
$n:位置，从1开始，必须是大于0的整数
编译为：
3.join() 将两个列表合并，每次只能合并两个，如果有多于三个列表合并需要使用多次join()
join($list1,$list2,参数3)
join((1,2,3),(a,b,c)，参数3);
参数3指定列表项的分隔符，默认为auto,逗号为comma，空格为space.
当参数3为自动时：以列表1的分隔符来决定输出列表的分隔符，建议每次都指定
$list1 为逗号分隔，那么输出结果也是逗号分隔，
$list1 为空格分隔，那么输出结果也是空格分隔，
编译为：
4.append() 将一个列表值插入列表结尾
append($list1,$list2,参数三)
$list1,前面的列表
$list2,后面的列表
参数三，为分隔符，默认为auto,可以设置为comma逗号，space空格
编译后：
5.zip() 将多个列表组成一个多维列表，类似数组
编译为：
6.index()索引函数
index($list,值)，返回值所在的$list中的位置，从1开始，如果没有返回false
编译为：
7,introspection 自查函数
(1)type-of() 判断一个值是什么类型
返回值：
number 为数值型,可以带单位
string 为字符串型，两边用引号
bool为布尔型，true或false
color为颜色型,#000,red，rgb(0,0,0)等
编译为：
(2)unit() 获取一个值的单位，
如果值是表达式有多个单位，乘除单位可以不同，加减单位必须相同
当除两个单位相同时，返回空
编译为：
(3)unitless() 判断一个值有没有单位，如果没有返回true,如果有false
编译为：
实际中可以判断值有没有单位，如果没有自动给其加上
编译为:
(4)comparable() 判断两个数是否可以进行加 减 或 合并。
可以返回true.不可以返回false
编译为：
(5)三元函数
if($条件,$值1,$值2 )
当条件为真时，值为1
当条件为假时，值为2
编译为：
1.percentage() 将一个数字转换为百分比，单位必须相同
编译为：
2.round() 四余五入为最近整数
编译后：
3.ceil() 将一个数转换为最接近的数，只做入，不做舍
编译后：
4.floor() 将一个数转换为最接近的数，只做舍，不做入，和ceil相反
编译为：
5.abs() 返回一个数的相对值，可以带单位
编译为:
6.取最大值和最小值
min() 在多个数中找到最小的一个，可设置任意多个参数，如果有单位，单位必须相同
编译为：
max()在多个数中找最大值，可设置任意多个参数，如果有单位，单位必须相同
编译为：
7.random()取一个小于1的随机数
编译为：
1.字串函数：
(1)unquote 函数
unquote($string) 删除字符串两边的单引号，双引号，不能删除中间引号，不能删除单边引号。
编译后：
quote($string) 给字符串两边添加双引号，字符串中间不能有空格，不能有单引号或双引号，如果字符串两边已经有单引号会被自动换为双引号,!、?、> 等，除中折号 – 和 下划线_ 都需要使用双引号括起
编译后：
(2)字符串大小写转换函数：
to-upper-case() 将小写转换成大写
编译后：
to-lower-case() 大写转小写
编译后：
1.条件语句：@if
@if 条件为真时执行代码块，可以配合@else if 和 @else来用
编译后：
2.循环语句：
(1)@for
@for $i from <start> through <end>
@for $i from <start> to <end>
$i是变量
start:起始
end:结束
through包含end数, to 不包含end这个数
编译为：执行了三次
编译为：执行了两次
做网格案例：
编译为：
(2)@while
@whie 条件｛内容 条件变化｝
编译为：
(3)@each 循环
@each $var in <list>
$var 列表中对应值
list 列表名
编译为：
1.加法：
px可以和in,cm,mm相加，不能和em相加
编译后：
2.减法
px可以和in,cm,mm相减，不能和em相减
编译后：
3.乘法
被乘数和乘数不能同时都带单位，只能有一个带单位或都不带单位
编译后：
4.除法
在单表达式的两边需要加括号
在多运算符表达式中不需要加括号
当在表达式中有变量或函数时，也不需要加括号
当两个数都带单位时，当得一个无单位数
编译后：
多运算符：
编译后：
5.变量参于运算
编译：
6.数字运算：
加 减 乘 除 也可以使用括号提高优先集
编译后：
7.颜色运算：
可以颜色之前运算，也可以和数字一起运算，采用分段运算
编译后：
8.字符运算：
使用+号可以链接两个字符串，
编译为：
代码：
[cce]
//SCSS中混合宏使用
@mixin mt($var){
margin-top: $var;
}
.block {
@include mt(5px);
span {
display:block;
@include mt(5px);
}
}
.header {
color: orange;
@include mt(5px);
span{
display:block;
@include mt(5px);
}
}
//SCSS 继承的运用
.mt{
margin-top: 5px;
}
.block {
@extend .mt;
span {
display:block;
@extend .mt;
}
}
.header {
color: orange;
@extend .mt;
span{
display:block;
@extend .mt;
}
}
//SCSS中占位符的使用
%mt{
margin-top: 5px;
}
.block {
@extend %mt;
span {
display:block;
@extend %mt;
}
}
.header {
color: orange;
@extend %mt;
span{
display:block;
@extend %mt;
}
}
[/cce]
编译后：
可以看出：
1.混合宏不会自动合并重复代码，会产生冗余代码，但其可以通过变量可以传参数
2. 继承和占位符都会自动合并重复代码，但不能传参数
建议：
1.有需要涉及到变量传参数，使用混合宏
2.不使用变量传参数，且在代码中已经有一个共用样式存在使用继承
3.不使用变量传参数，代码中根据需要有一个共用的样式那么就使用占位符