关于 Scss 的一些用法

注意：一定要提前声明才能使用。

混合 @mixin

• 说明：定义公共样式，可进行传参和逻辑处理，配合@include使用

// 没有参数
@mixin overflow{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
// 可传参数
@mixin flex($align:center,$justify:center){
    display: flex;
    align-items: $align;
    justify-content: $justify;
}
// 使用
div{
    @include overflow;
    @include flex(flex-start,flex-start);
}

继承 @extend

• 说明：定义公共基础样式，与@mixin区别是不能传参和逻辑处理，只能继承定义好的固定样式

.custom{
    display:flex;
    align-items:center;
}
div{
  @extend .custom;
}

占位符 %

• 说明：不会编译到css文件中，优化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使用，进行逻辑判断

@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 数组
$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 数组
$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;
}

数组 (key:value,key:value)

• 说明：类似js map 数组结构
• map【当前数组】key【对应key键值】 index【数组索引，默认从1开始】
• nth(map,index)：获取map数组对应索引index的值
• map-get(map,key)：获取map数组中对应key的值
• map-keys(map,index)：获取map数组keys列表中对应索引index的key值
• map-values(map,index)：获取map数组values列表中对应索引index的value值
• type-of(item)：判断item是不是数组，type-of(item) == ‘list’表示item为数组

// 定义数组
$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：如有不对之处，欢迎告之。