//变量定义和赋值
$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;
}
}
}