Sass
- Sass文件后缀
.acss(内容为css格式),.sass(内容相对于css为省略{})
- 变量
变量名格式$name:value,如果value为默认值则这样声明$name:value !default
引用:$name
特殊引用:#{$name}
全局引用:通过!global(只有在3.4后续的版本中起作用)
3.4之前的版本在特定的选择其中对变量的再次赋值会应用到全局中
//scss
$myColor:red;
div{
$myColor:blue;
color:$myColor;
}
h1{
color:$myColor;
}
//css
div{
color:blue;
}
h1{
color:blue;
}
//3.4之后的版本
div{
color:blue;
}
h1{
color:red;
}
多值变量(数组与map):
定义一个多值变量:$list:12px 36px 56px(一维),$list:12 35,56 89,69 78(多维通过,或者()分开)
引用多维变量通过font-size:nth($list,2)结果会是font-size:36px
- 文件的import
@import part.scss(可以省略后缀.scss),编译器会将被导入的part.scss包含进引入的文件中(会合并成一个文件),如果导入一个css文件,该文件不会被合并,而是像css文件导入一样,使用时发送一个http请求
- 嵌套
nav{
color:red;
li{
}
a{
font-size:16px;
}
}
编译之后会生成如下css文件
nav{color:red}
nav li{ line-height: normal; orphans: 2; text-align: -webkit-auto; widows: 2; font-size: medium;"> nav a{font-size:16px}
//会不会用到属性的嵌套??????
嵌套跳出:通过@at-root @at-root(without:media) @at-root(without:all)
既然要跳出为什么不直接写在外边??????
- Maxin
定义:@maxin name($value1:1,$value2:2){color:$value1;font-size:$value2}
使用:p{@include name(#333,14px);text-align:center}
- 继承
实现:通过extend关键字实现
h1{color:red}
h2{@extend h1;font-size:15px;}
注意%的作用:当以%开头的选择器没有被调用时编译结果不会出现该选择器
- Function
- if
}@else{
}
三目条件运算符:
if(condition,value1,value2);
- for
}
- each
@each value in list{
}
@each key,value in map{
}