1. 嵌套选择器
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}
编译后
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
2. 变量声明和使用
$width: 100px;
$height: 100px;
$bg-red: #ff4040;
.box{
width: $width;
height: $height;
background: $bg-red;
}
编译后
.box{
width: 100px;
height: 100px;
background: #ff4040;
}
3. 父选择器标识符&
article a {
color: blue;
&:hover { color: red }
}
编译后
article a { color: blue }
article a:hover { color: red }
4. 嵌套属性
nav {
border: {
style: solid;
width: 1px;
color: #000;
}
}
编译后
nav {
border-style: solid;
border-width: 1px;
border-color: #ccc;
}
5. 混合器(整合重复代码)
- @mixin 定义混合器
- @include 使用混合器
- 定义混合器
@mixin box-style {
width: 100px;
height: 100px;
}
- 使用混合器
.box1{
background: cyan;
@include box-style;
}
.box2{
background: #ff4040;
@include box-style;
}
编译后
.box1{
background: cyan;
width: 100px;
height: 100px;
}
.box2{
background: #ff4040;
width: 100px;
height: 100px;
}
6. 给混合器传参
- @mixin接收参数使用 @include传参,这种方式跟JavaScript的function很像
- 定义混合器
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
- 使用混合器并传参进去
a {
@include link-colors(blue, red, green);
}
编译后
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
7. @for
用法1:through
条件范围包含 start 与 end 的值 @for $var from <start> through <end>
@for $i from 1 through 3 {
.w-#{$i * 100} { width: 100px * $i; }
}
编译后
.w-100 {
width: 100px;}
.w-200 {
width: 200px;}
.w-300 {
width: 300px;}
用法2:to
条件范围只包含 start 的值不包含 end 的值 @for $var from <start> to <end>
@for $i from 1 to 3 {
.w-#{$i * 100} { width: 100px * $i; }
}
编译后
.w-100 {
width: 100px;}
.w-200 {
width: 200px;}
标签:sass,width,color,混合器,100px,height,编译,background,css
From: https://blog.csdn.net/weixin_42554330/article/details/137297870