定制SCSS
boot重点手写响应式+栅格布局+SCSS
1.CSS有一些缺点
语法不够强大，没有变量和合理的代码复用机制，导致代码难以维护
我们要使用动态样式语言，赋予css新的特性，提高代码的可维护性
常见的动态样式语言
1.scss/sass （scss兼容sass，scss的语法更接近css）
boot4是使用scss生成的
2.stylus
3.Less
2.scss是什么
一款强化css的辅助工具
scss的语法和css的语法十分相似
scss给css添加了变量，嵌套，混合，导入，函数等高级功能
这些高级功能，让css更加的强大与优雅
使用scss要注意
浏览器，不能执行scss文件，
需要在后台，把scss文件，转换成css文件，才能让浏览器解析运行
3.scss的使用
①安装
1.要求nodejs解释器，v8.11以上
如果安装scss64位，需要nodejs v10.01以上
2.在线安装 npm install -g node-sass
3.无网安装，把解压文件，复制进nodejs安装文件夹即可
4.检验scss版本(是否安装成功) node-sass -v
②scss文件转换成css
1.单文件转换
node-sass 要转换的scss文件 转换之后的css文件
node-sass scss/01.scss css/01.css
2.多文件转换
node-sass scss文件夹 -o css文件夹
node-sass scss -o css
3.单文件监听
node-sass -w要转换的scss文件 转换之后的css文件
node-sass -w scss/01.scss css/01.css
4.多文件监听
node-sass -w scss文件夹名称 -o css文件夹名称
node-sass -w scss -o css
4.SCSS基础语法
①变量
$开头，代表声明变量
：代表赋值
$jd_red:#f10215;
变量名称，可以包括，字符，数字，- ,_
不能以数字开头，
规则基本与css选择器命名规则相同
注意：
1.在{}内部声明的变量，只能在{}内部使用，外部无效
如果变量声明在{}外，当前scss文件都能使用
2.!default规则：如果此变量在之前已经声明赋值了，那么就使用之前的值
如果之前没有声明赋值，就使用现在的值
②嵌套
1.根据html代码的结构，写选择器
#content{
color:#000;
.top{
color:#111;
h4{color:#333;}
p{color:#444;}
}
.bottom{color:#222;}
}
2.伪类嵌套，需要在伪类前，添加&占位符，不然会多一个空格
div{
color:#111;
&:hover{color:#222;}
}
3.群组选择器嵌套
nav,div,#content,ul{
a{color:#112;}
}
4.属性嵌套
div{
border:{style:solid;width:10px;color:#f00;}
}
练习
一个200*200px（变量）的div，红色背景(变量)
鼠标悬停(嵌套)，过渡（嵌套）到黄色背景，且变为圆形（变量）
③导入
局部scss文件，下划线开头的scss，叫局部scss文件
特点，不会被转换成css文件
如何使用
在全局scss文件中引入
@import "局部scss文件名称" 注意，不要下划线，不要后缀
十分有利于css项目管理
局部scss中的变量，可以在引入他的全局scss中使用
④混合器
把多个选择器，都会使用的样式，封装进一个混合器
然后在需要使用的时候，调用混合器
声明
@mixin 混合器名称(形参1,形参2....){样式}
调用
@include 混合器名称(实参1,实参2...)；
@mixin bg_linear($angle,$color1,$color2){ background:-webkit-linear-gradient($angle,$color1,$color2); background:-ms-linear-gradient($angle,$color1,$color2); background:-moz-linear-gradient($angle,$color1,$color2); background:-o-linear-gradient($angle,$color1,$color2);}h2{@include bg_linear(right,#ff0,#0ff)}
经常用于大量的样式重用
用于css hack
⑤继承
一个选择器，继承另外一个选择器所有的样式
在子选择器中，使用关键字@extend 父选择器
可以把父选择器的所有样式，给子选择器使用
div{box-shadow: 0px 0px 0px 0px #f00;}
p{
color:#111;
@extend div;
}
⑥运算，加减乘除模
+ 有连接字符串的功能
用带引号的字符串 + 不带引号，结果带引号
用不带引号的字符串 + 带引号的，结果不带引号
- 是可以放在变量名称中的
由于转换的时候，有可能会把-认为是变量的一部分
所以，在使用减法的时候，减号前后加空格
/ scss中,/还有分割符的意思
在以下情况，会被判定为除法
1.如果运算符两边，有变量或者函数的返回值，认为是除法
width: $width/2;
2.被()包裹，认为是除法
height:(500px/2);
3.除法运算式，是其它算术表达式的一部分，认为是除法
5px+8px/2px;
scss会在不同单位间，自动转换，前提这个单位能转
相对单位rem em % 不能转换
width:1px+1in+1pt+1cm+1mm；这些绝对可以自动转换
scss插值运算
content:"liangliang ate #{50+20} baozis";
颜色运算，分段运算
#112233+#445566 红+红 绿+绿 蓝+蓝
结果#557799
rgba的运算，需要alpha相等才能运算
⑦函数
scss定义了很多函数，有些函数可以在css中直接使用
rgba()
hsl(hue,saturation,lightness)
hue:色调 取值0~360 0~120 120~240 240~360 3个色段
saturation饱和度 取值0.0%~100%
lightness 亮度 取值0.0%~100%
数学函数
round($val) 四舍五入
floor($val) 向下取整
ceil($val) 向上取整
min($v1,$v2,.....);
max($v1,$v2,.....);
random() 随机数
字符串函数
unquote($val) 去掉双引号
quote($val) 添加双引号
to_upper_case("abc") 转大写
to_lower_case("ABXC") 转小写
自定义函数
@function get-width($n,$m){
@return $n*$m;
}
function和return关键字，添加@
参数要有$
⑧指令(if-else)
@if(){}
@else if(){}
@else{}