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. 占位符 — %