注意：一定要提前聲明才能使用骇陈。
混合 @mixin
- 說明：定義公共樣式，可進(jìn)行傳參和邏輯處理症虑，配合@include使用
// 沒有參數(shù)
@mixin overflow{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// 可傳參數(shù)
@mixin flex($align:center,$justify:center){
display: flex;
align-items: $align;
justify-content: $justify;
}
// 使用
div{
@include overflow;
@include flex(flex-start,flex-start);
}
繼承 @extend
- 說明：定義公共基礎(chǔ)樣式缩歪，與@mixin區(qū)別是不能傳參和邏輯處理，只能繼承定義好的固定樣式
.custom{
display:flex;
align-items:center;
}
div{
@extend .custom;
}
占位符 %
- 說明：不會編譯到css文件中谍憔，優(yōu)化css文件大小匪蝙，配合@extend使用
// 使用之前,這個.custom類的樣式段會被編譯到css文件中
.custom{
display:flex;
align-items:center;
}
// 使用之后，css文件中不存在%custom樣式段习贫，而是在div直接生成
%custom{
display:flex;
align-items:center;
}
div{
@extend %custom;
}
插槽 @content
- 說明：配置@mixin使用逛球，傳入自定義樣式
@mixin flex($align:center,$justify:center){
display: flex;
align-items: $align;
justify-content: $justify;
@content;
}
div{
@include flex(){
border:1px solid;
}
}
插值 #{}
- 說明：類似js定義好變量，使用變量拼接字符串
$font:font;
$size:36px;
$color:color;
div{
color:blue;
background-#{$color}:#fff;
#{$font}-size:$size;
}
條件判斷 @if {...} @else if{...}
- 說明：配置@mixin使用苫昌，進(jìn)行邏輯判斷
@mixin platform($name:'pc'){
@if $name == 'phone'{
color:red;
}@else if $name == 'pc'{
color:blue;
}
// 或
@if $name == 'phone'{
color:red;
}@else{
color:blue;
}
}
div{
@include platform('phone');
}
遍歷 @each ... in ...{}颤绕、@for ... from 1 through ...{}、@while ...{}
// 第一種：@each
// list 列表
$name:'a','b','c';
@each $i in $name{
div.#{$i}{
color:blue;
}
}
// map 數(shù)組
$name:(a:1,b:2,c:3);
@each $i,$v in $name{
div.#{$i}{
font-sise:#{$v}*10px;
}
}
// 第二種：@for
// 列表
$name:'a','b','c';
@for $i from 1 through length($name){
div.#{$i}{
color:blue;
}
}
// map 數(shù)組
$name:(a:1,b:2,c:3);
@for $i from 1 through length($name){
$key: nth(map-keys($name), $i);
$value: nth(map-values($name), $i);
div.#{$key}{
font-sise:#{$value}*10px;
}
}
// 第三種：@while
$i:20;
@while $i>2{
div.#{$i}a{
color:red;
}
$i:$i - 1;
}
數(shù)組 (key:value,key:value)
- 說明：類似js map 數(shù)組結(jié)構(gòu)
- map【當(dāng)前數(shù)組】key【對應(yīng)key鍵值】 index【數(shù)組索引祟身，默認(rèn)從1開始】
- nth(map,index)：獲取map數(shù)組對應(yīng)索引index的值
- map-get(map,key)：獲取map數(shù)組中對應(yīng)key的值
- map-keys(map,index)：獲取map數(shù)組keys列表中對應(yīng)索引index的key值
- map-values(map,index)：獲取map數(shù)組values列表中對應(yīng)索引index的value值
- type-of(item)：判斷item是不是數(shù)組奥务，type-of(item) == ‘list’表示item為數(shù)組
// 定義數(shù)組
$map:(
aa:123,
bb:(
1,2,3
)
)
$item1:nth($map,1) // aa:123
$item2:nth($map,2) // bb:(1,2,3)
$key1:map-get($map,aa) // 123
$key2:map-get($map,bb) // (1,2,3)
$keys1:map-keys($map,1) // aa
$keys2:map-keys($map,2) // bb
$values1:map-values($map,1) // 123
$values2:map-values($map,2) // (1,2,3)
$boolean1:type-of($key1) // false
$boolean2:type-of($key2) // true
示例-移動適配
$platformMap:(pc:961px, app:(320px,960px))
@mixin platform($name:pc){
$map:map-get($platformMap,$name);
@if type-of($map) == 'list'{
$min:nth($map,1);
$max:nth($map,2);
@media (min-width:$min) and (max-width:$max) {
@content;
}
}@else{
@media (min-width:$map){
@content;
}
}
}
.header{
font-size: 10px;
@include platform(pc){
font-size: 40px;
}
@include platform(app){
font-size: 20px;
}
}
PS：如有不對之處，歡迎告之袜硫。
