Sass
一、sass概述
1.sass概念
sass是一种css的“预处理”器，一种专门的css编程语言。增加了一些内容：变量、函数、嵌套关系等，可以让css编写的更加清晰。
sass不能直接当css用，需要经过一次编译，将sass编译成css再使用。
sass是一种，less、stylus，常见的三种市场占有率较高的预处理器，使用方法大同小异。
2.scss和sass关系
是延伸关系，可以说scss是sass的更新版本，scss就是sass3.0以后的版本。以前名如：header.sass后置是sass。现在header.scss
sass并没有废弃，依然可以使用。
在编译的时候仍然使用原有的编译语法，不因为版本更新就变更编译的语法。只是文件的后缀名改了！
为什么要改？
sass语法与css的语法相差甚大，学习成本增加。scss的语法接近于css语法，可以说基本一样。
3.sass安装
安装的时候，安装的是sass，npm install sass -g
在npm上安装编译sass的包很多，每个包安装后，编译的语法有差别。
依赖ruby安装的，检查方法 sass -v
npm直接安装的，检查方法 sass --version
4.编译方法
进入项目文件 sass -w监听 xxx文件夹/x.scss文件:yyy文件夹/y.css
D:\2nd\day19>sass -w abc/1.scss:css/1.css 监听编译文件
D:\2nd\day19>sass -w scss:css 监听整个文件夹里面所有文件的变化
确定是项目文件夹内运行的cmd
sass是命令不能改名
-w 代表监听
scss是文件夹名（可改）
: 代表编译至，后面写文件夹或者文件名
二、基本规则
1.编码规则
（1）使用万国码
@charset “utf-8”; 记住一定要加分号
中文输入时会有三种情况：
1.直接输入中文不会有任何乱码，编译直接且成功
2.写中文出乱码或者直接报编译错误，在scss文件的最顶处写 @charset “utf-8”;
3.不管写不写@charset “utf-8”;都乱码或者编译错误，检查自己是否是依赖ruby安装的sass
在 Ruby 1.9 及以上环境中运行 Sass 时，Sass 对文件的编码格式比较敏感，首先会根据 CSS spec 判断样式文件的编码格式，因此，scss需要加入@charset "UTF-8";来保证编译过程编码方式，否则有可能在编译后的css中出现中文的乱码。
在scss中使用@charset "UTF-8";会报错的原因是使用的ruby安装，在\Ruby23-x64\lib\ruby\gems\2.3.0\gems\sass-3.4.22\lib\sass\engine.rb的所有require后加一句 Encoding.default_external = Encoding.find(‘utf-8’)可以尝试解决
2.注释规则
/**/ css认识的注释，编译后该类注释也可以被编译出来
// 在scss文件中可以使用，但不会被编译到css文件中去
3.导入规则
将一个scss文件导入到另一个scss文件中去使用，在编译后会有到导入的内容。
在优化的角度看，导入的方法并不很可取
@import “./2.scss”;
4.嵌套规则
嵌套写法是精髓，要习惯使用。保证了选择器的嵌套正确性，以及权重值
.box {
background-color: yellow;
h1 {font-size: 18px;}
ul {
li {
width: 150px;
img {
width: 100%;
}
p {padding: 0;}
}
}
}
三、scss语法
1.变量的使用
（1）变量的创建
$变量名:值;
$是创建变量的必要符号
变量名不允许数字开头
冒号赋值:
值可以是关键词、数字、组合值、表达式
（2）变量的使用
变量在给与样式作为值的时候，编译后，使用变量名就等于使用变量的值
$abc:10px;
$color:red;
$border:1px solid black;
div {
width: $abc;
color: $color;
border: $border;
}
（3）局部变量和全局变量
$abc:10px; 全局变量，一般放在文件的顶部
div {
width: $abc;
color: $color;
border: $border;
$xyz:30px; 局部变量是有声明和使用顺序的
height: $xyz; 局部变量只能在当前选择器作用域下可以使用
}
p {
width: $abc; 全局变量任何的选择器都可以使用
}
2.父选择器&
&父选择器会在元素中的嵌套里出现，但其却代表父级，一般情况不会用，但在使用伪类或者伪元素的时候，必须使用父选择器占位，否则伪类、伪元素均不生效
.box {
& {background-color: red;}
h2 {
font-size: 20px;
&:hover {background-color: red;}
}
}
3.计算功能
在sass编译的运算过程中，还可能出现报错或者不运算，原因系统I/O调用顺序导致的。
$a:100px;
$b:10;
div {
width: 100px+20px;
height: 100px-20px;
margin: 100px*10;
padding: a / a/ a/b;
}
4.插值语句
插值语句#{}，一般有两个用法
插值#{}可以将变量，变成一个字符串使用，在计算中可以不运算
$x:10px;
KaTeX parse error: Expected '}', got '#' at position 29: …border-radius: #̲{x}/#{$y};}
变量是不能当做选择器名使用的。因此在选择器中如果需要出现变量，当做选择器中的某个环节或者直接作为选择器，需要使用插值#{}包裹变量使用。包括nth-child(数字)都不能使用变量，如要使用必须插值包裹
KaTeX parse error: Expected 'EOF', got '#' at position 11: b2:box2; .#̲{b2} {color: red;}
四、混合指令
1.定义混合指令
定义一个很简单的混合指令，用于多个元素调用直接使用混合指令内的css样式
@mixin btn {
width: 100px;
height: 40px;
border-radius: 5px;
background-color: red;
color: #fff;
}
.d1 {
//引用混合指令
@include btn;
}
2.可传参的混合指令
// 可传参的混合指令
@mixin btn2( w , w, w,h) {
width: $w;
height: $h;
border-radius: 5px;
background-color: blue;
color: #fff;
}
.d3 {
@include btn2(100px,38px);
}
3.在混合指令中可写选择器
混合指令中也可定义嵌套规则
@mixin abc {
& {background-color: red;}
span {color: #fff;}
}
.d4 {
@include abc;
}
五、继承
1.简单的继承
继承和混合指令有区别，继承是继承某个选择器内的所有css样式。@extend 选择器
.d1 {
width: 100px;
height: 100px;
}
.d2 {
@extend .d1;
}
继承后是群组选择器，减少了css代码量，从优化的角度看，更加合理，更加的优化。
2.链式继承
.d1 {
width: 100px;
height: 100px;
}
.d2 {
@extend .d1;
background-color: red;
}
.d3 {@extend .d2;}
.d2有的也会被继承了.d2的.d3继承下来，所以.d3同时拥有.d1的样式和.d2的样式
3.扩展继承
.d1 {
width: 100px;
height: 100px;
}
.d4 {
border-radius: 10px;
}
.d5 {
@extend .d1,.d4;
}
用逗号相连多个选择器，可以继承多个选择器的css
4.占位选择器%
占位选择器，不会被编译，但可以被其它的选择器继承。占位选择器也可以和其它继承的选择器一起使用，用逗号连接多个选择器。
%bg {
background-color: #a001ed;
color: #fff;
}
.d6 {
width: 200px;
height: 100px;
@extend %bg;
}
六、高级语法
1.条件语句
@if条件判断
在选择器中进行条件判断
$a:10px;
.d1 {
@if $a>10px {
background-color: red;
}@else {
background-color: blue;
}
}
在全局判断，选择器内换不同样式
@if $a==10px{
.d2{background-color: yellow;}
}@else {
.d2{background-color: green;}
}
and 代表并且，or代表或者，所以if语句可以写多条件判断
@if $a>10px and $a<20{
.d3 {background-color: red;}
}@else if $a>20px or $a<10px {
.d3 {background-color: blue;}
}@else {
.d3 {background-color: green;}
}
2：for循环：
//从1——5循环 to 不包含5
@for KaTeX parse error: Expected '}', got '#' at position 38: …l>li:nth-child(#̲{var}){
width: 10px*$var;
}
}
//从1——5循环 through 包含5
@for KaTeX parse error: Expected '}', got '#' at position 41: …l>li:nth-child(#̲{k}){
width: 100px+$k*2;
}
}
七：函数：
@function box1($w){
@if KaTeX parse error: Expected '}', got '#' at position 35: …rn 5px 5px 3px #̲222; }@else…list:值)
帮你返回一个没有单位的数字 content: length( l i s t : 200 p x ) ; / / 1 c o n t e n t : l e n g t h ( list: 200px );//1 content:length( list:200px);//1content:length(list: 1px solid red);//3
content:length(5px 10px);//2
round( n u m b e r : 0 ) ; 四 舍 五 入 计 算 c o n t e n t : r o u n d ( 9.4 ) ; c o n t e n t : r o u n d ( 9.5 ) ; c e i l ( number: 0); 四舍五入计算 content:round(9.4); content:round(9.5); ceil( number:0);四舍五入计算content:round(9.4);content:round(9.5);ceil(number: 5.5)
向上取整都是在数字的基础上，有小数就进一位 ceil($number: 5.5);//6
floor( n u m b e r : 4.9 ) 不 管 写 什 么 数 ， 都 展 示 整 数 部 分 c e i l ( number: 4.9) 不管写什么数，都展示整数部分 ceil( number:4.9)不管写什么数，都展示整数部分ceil(number: 5.5);//4
floor($number: 4.9)//4
random( l i m i t : 9 ) ; 从 1 m a x 的 随 机 数 字 c o n t e n t : r a n d o m ( limit: 9); 从1~max的随机数字 content:random( limit:9);从1max的随机数字content:random(limit: 9);
rgba(#222,0.5);
可以将一个十六进制的颜色色值转换为rgba色值方式，第二个值是0~1之间的透明度值
