Advantages of SCSS: Write clear, redundant, and semantic CSS to reduce unnecessary duplication of work
- 1. Variable declaration (`$`) and usage
- 2. Use `&` instead of parent element
- 3. Use `:style={'--name': dynamic value}` to customize attributes in HTML, and use `var(--name)` function to bind dynamic variable values in SCSS.
- 4. Mixer (`@mixin`) and use (`@include`)
- 5. Define parameters for the mixer (`@mixin`) and use (`@include`) to pass parameters
- 6. Use (`@extend`) to inherit the public class (element name, .class)
- 7. Use `@function` and `@for` loop statements
- 8. Use `@each` loop
1. Variable declaration ( $) and usage
// 用`$`声明变量
$color: red;
// 直接使用变量
span{
color: $color; }
p{
background: $color; }
2. Use &instead of parent element
a{
color: red;
&:hover{
color: green;
}
}
:style={'--name': 动态值}3. Use custom attributes in HTML and var(--name)bind dynamic variable values with functions in SCSS.
<p v-for="(item, index) in dataList" :key="index" :style="{'--color': item.color}" >{
{item.name}}</p>
p{
color: var(--color);
}
data() {
return {
dataList: [
{
name: '红色', color: 'red'},
{
name: '蓝色', color: 'blue'},
{
name: '绿色', color: 'green'}
]
}
}
4. Mixer ( @mixin) and use ( @include)
// @mixin声明混合器: 圆角边框
@mixin round-radius{
border-radius: 10px;
background: red;
}
// 使用@include 混入一段重用样式的代码
p{
width: 200px;
height: 100px;
@include round-radius; // @include 使用变量
}
5. @mixinDefine parameters for mixer ( ) and use ( @include) to pass parameters
// @mixin声明混合器: a不同状态的颜色参数
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover {
color: $hover; }
&:visited {
color: $visited; }
}
// @include 使用变量，并传入实际参数
a {
@include link-colors(blue, red, green);
}
//Sass编译后最终生成的是：
a {
color: blue; }
a:hover {
color: red; }
a:visited {
color: green; }
6. Use ( @extend) to inherit the public class (element name, .class)
//通过选择器继承继承样式
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error; // 继承
border-width: 3px;
}
7. Use @functionand @forloop statements
@for 指令可在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。
包含两种格式：
@for $var from <start> through <end> 代表 [ start, end ]
@for $var from <start> to <end> 代表 [ start, end }，不包含end
另外，$var 可以是任何变量，如 $i；<start> 和 <end> 必须是整数值。
Usage one:
@for $i from 1 through 3 {
.item-#{
$i} {
width: 2em * $i; }
}
// 编译为：
.item-1 {
width: 2em; }
.item-2 {
width: 4em; }
.item-3 {
width: 6em; }
Usage two:
// 使用scss随机添加 box-shadow,参数 n = 个数，range = 范围
@function multiple-box-shadow($n, $range) {
$value: '#{
random($range)}px #{
random($range)}px #FFF';
@for $i from 1 through $n {
$value: '#{
$value} , #{
random($range)}px #{
random($range)}px #FFF';
}
@return unquote($value); // 去掉''引号
}
#stars {
width: 1px;
height: 1px;
box-shadow: multiple-box-shadow(700, 2000);
}
Use box-shadow to randomly draw small squares to form a starry sky
8. Use @eachloops
@each $color in red, blue, green{
.#{
$color}-icon {
background-image: url('/images/#{$color}.png');
}
}
// 编译为：
.red-icon {
background-image: url('/images/red.png');
}
.blue-icon {
background-image: url('/images/blue.png');
}
.green-icon {
background-image: url('/images/green.png');
}