sass的scss的语法

喜欢ヅ旅行 2022-12-12 04:51 208阅读 0赞

## sass的scss的语法 ##

> 1.`$s:"red"` 定义变量后面加`!default`就是默认值，有值掉值，没值取默认，不论前后 `$a:"red"; $a:"blue" !default;`  
> 2.`&：hover{}` 里面调用指向父级  
> 3.`&+&` 相当于兄弟元素  
> 4.`@at-root` 跳出当前的整个嵌套  
> 5.`@media only screen and(max-width: 768px)` 媒体查询跳不出去 需要借助`@at-root(without:media)`  
> 6.`#{变量}` 用来拼接  
> 7.`@if（）{}else{}` 可以使用条件语句  
> 8.`@extend` 继承  
> 9.`@mixin` 定义混合器  
> 10.`@mixin flex-box($dir:row){ //后面可以接默认值 display: flex; flex-direction: $dir; justify-content: center; align-items: center; @content; //这就是占位符 }`  
> 11.`@content` 占位符

//to是不包含10
    @for $i from 1 to 10 { 
        .div#{ $i}{ 
            width: #{ $i * 100}px;
        }
    }
    //through包含10
    @for $j from 1 through 10 { 
        .a#{ $j}{ 
            width: #{ $j * 100}px;
            color: if($j % 2 == 0,red,blue);
            // @if($j % 2 == 0) { 
            // color: red;
            // }@else{ 
            // color: blue;
            // }
        }
    }

循环语句

> `遍历数组`

$colorList:red,
    blue,
    yellow,
    green;
    
    //怎么遍历数组
    @each $item in $colorList { 
        .bg-#{ $item}{ 
            background-color: $item;
        }
    }
    $imgList:item1,item2,item3,item4;
    @each $item in $imgList{ 
        .bg-#{ $item}{ 
            background-image: url(imgs/#{ $item}.png);
        }
    }
    
    $list1:a,b,c,d;
    $list2:item1,item2,item3,item4;
    $list3:baner1,baner2,baner3,baner4;
    @each $i,$j,$k in (a,item1,baner1),(b,item2,baner2),(c,item3,baner3)
    { 
        .div-#{ $i}{ 
            background-image: url(img/#{ $j}/#{ $k}.jpg);
        }
    }

键值对key-value

$colorType:(
        default:#ffffff,
        primary:#418bca,
        success:#5bb85d,
        info:#5BC0DE,
        warning:#f0ae4e,
        danger:#D9544F
    );
    @each $key,$value in $colorType { 
        btn-#{ $key}{ 
            background-color: $value;
        }
        .bg-#{ $key}{ 
            background-color: $value;
        }
    }
    .text-primary{ 
        color: map-get($colorType,primary );
        color: map-keys($colorType);
    }
    .abc{ 
        background-color: linear-gradient(to right,map-values($colorType));
    }

#### `函数` ####

//scss 定义了很多函数，当然也可以自定义函数
    .div1{ 
        background-color: darken(red,10%);
    }
    @function getColor($num){ 
        //根据变量定义参数
        @if $num >=400{ 
            @return red;
        }
        @else if $num >=300{ 
            @return blue;
        }
        @else if $num >=200{ 
            @return green;
        }
        @else { 
            @return orange;
        }
    }
    .div2{ 
        background-color: getColor(350);
        font:{ 
            size:12px;
            weight:bold;
        }
        text:{ 
            align:center;
            decoration:underline;
        }
        animation: { 
            duration:10s;
            delay:2s;
            name:loading;
        };
    }
    //@function定义函数 ，@return 函数的返回值

### 其他功能 ###

//其他功能汇总
    $list1:red,
    blue,
    yellow,
    green;
    $list2:orange;
    
    //nth-child()从1开始
    .div1 { 
        color: nth($list1, 1);
    }
    
    .div2 { 
        background-image: linear-gradient(to right, join($list1, $list2));
    }
    
    $list3: append($list1, black);
    
    .div3 { 
        color: $list3;
    };
    
    //while循环比for循环高级
    $i:10;
    
    @while $i > 0 { 
        .aaa-#{ $i} { 
            width: #{ $i * 100}px;
        };
        $i : $i - 2;
    }