一、sass基础
css预编译处理语言,可实现css样式代码的重用,方便维护。
比如下面的$fontColor,使用较多且需要修改时,只改此处的值即可
1、基础用法
$fontColor: #333;
body {
color: $fontColor;
}
2、作用域
$mycolor: #333;
body {
$mycolor: #dfdfdd;
color: $mycolor; // #dfdfdd
}
p {
color: $mycolor; // #333
}
$mycolor: #333;
body {
$mycolor: #dfdfdd !global;
color: $mycolor; // #dfdfdd
}
p {
color: $mycolor; // #dfdfdd
}
3、选择器嵌套
可以像html标签一样,父级嵌套子级。
body {
background-color:aqua;
ul {
margin: 10px;
li {
display: block;
}
}
}
4、属性嵌套
font: {
size: 10px;
family: 'Microsoft Yahei';
weight: bold;
}
5、@mixin与@include
当某个样式需要被频繁应用于项目中时,可使用混入。
@mixin mixin-name {
background-color: #dfdfdd;
font-size: 20px;
}
body {
@include mixin-name; // scss语言中,-和_是相同的
}
@mixin mixin-name($color, $width) {
background-color: #dfdfdd;
font-size: 20px;
border: $width solid $color;
}
body {
@include mixin-name(#dfdfdf, 20px); // scss语言中,-和_是相同的
}
6、@extend
.nav {
border: 1px solid #dfdfdf;
cursor: pointer;
}
.body {
@extend .nav;
background-color: bisque;
}
7、#{}的使用
#{}一般用于拼接字符串。
$border: border-left;
$width: 10;
.nav {
#{$border}-radius:5px;
border: #{$width} solid #333;
}
8、&的使用
body {
width: 300px;
height: 300px;
&-one { // &指代上层选择器
margin-top: 10px;
}
}
9、@import
@import 引入scss文件。无需加后缀,会自动添加后缀。
scss文件中,也可做循环,判断等运算,详细可见嘟嘟嘟