scss使用笔记

//变量定义和赋值
$bl1:4;
$bl2:8;
//混入@mixin声明，使用@include引入
@mixin common{
    border: {
        style:solid;
        width: 1px;
        color: red;
    }
    background: randomColor();
    width: 100%;
    height: 200px;
}

//函数@function声明和@return返回值（必须）
@function randomNum($max,$min:0,$u:1){
    @return ($min + random($max)) * $u;
}
@function randomColor(){
    @return rgb(randomNum(255),randomNum(255),randomNum(255));
}
//&引用父选择器（可以当成是父选择器的缩写。注：只能在放开头）
//@for $var from <start> through/to <end>{}(through包括结束值,to 不包括介绍值)
//#{}直接将变量输出
.content{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    overflow: hidden;
    @for $i from 1 to $bl1{
        & .item:nth-of-type(#{$i}){
            display: flex;
            flex-basis: 30%;
            @include common;
        }
    }
    
}