CSS - SCSS

1. scss引入其他文件

@import "./variables.scss";

2. scss变量 — $

$primary-color: rgb(3, 166, 106);

3. 嵌套

ul{li{a{ }}
}
/*以上相当于编译后的CSS*/
ul { }  
ul li { }  
ul li a { }

a{&:hover{}
}
/*在属性选择器中，&表示父元素选择器，以上相当于编译后的CSS*/
a { }
a:hover { }

4. 混合 — 调用@mixin方法需要使用 @include

@mixin font{ font-size:16px; 
} 
.page-title { @include font; 
} 
/*以上相当于编译后的CSS*/
.page-title { font-size:16px; 
}

@mixin font($size:12px){font-size: $size;
}
.page-title{@include font(16px);
}
.label-title{@include font();
}
/*带参数混合，以上相当于编译后的CSS*/
.page-title{font-size: 16px;
}
.label-title{font-size: 12px;
}

5. 继承 — @extend

.page-title {font-size: 22px;
}
.tab-page-title {@extend .page-title;
}
/*以上相当于编译后的CSS*/
.tab-page-title {font-size: 22px;
}

6. 占位符 — %