sass的scss的语法

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;
}