间距
生成padding，margin间距
/** 常用间距，输出：
* .mt5 { margin-top: 5px } .mt10 { margin-top: 10px }等间距信息
*/
$spacesList: (
mt: "margin-top",
mr: "margin-right",
mb: "margin-bottom",
ml: "margin-left",
pt: "padding-top",
pr: "padding-right",
pb: "padding-bottom",
pl: "padding-left"
);
$numbers: (5, 10, 12, 15, 20);
@each $key, $type in $spacesList {
@each $num in $numbers {
.#{$key}#{$num} {
#{$type}: #{$num}px;
}
}
}
Font Size
根据配置字体数组，生成字体大小
/** 生成形如 .fsize10 { font-size: 10px } */
$sizes: (10, 11, 12, 13, 14, 15, 16, 17, 18, 20, 22, 24);
@each $size in $sizes {
.fsize#{$size} {
font-size: #{$size}px;
}
}
Color
常用颜色定义和生成
/** 生成 类似 .fc999 { color: #999 } 的css文件 */
/** 颜色定义 */
$d3: #333;
$d6: #666;
$d9: #999;
$fff: #fff;
$blue: #2c5cc5;
$org: #ff6c37;
$red: #ea5a5c;
$green: #29b87a;
/** 采用的颜色key以及对应的色值 */
$colorList: (
fff: $fff,
blue: $blue,
org: $org,
999: $d9,
666: $d6,
333: $d3,
red: $red,
green: $green
);
@each $key, $value in $colorList {
.fc#{$key} {
color: #{$value}
}
.bg#{$key} {
background-color: #{$value}
}
}
版本信息
以上依赖的Sass版本信息为
{
"node-sass": "4.12.0",
"sass-loader": "8.0.2"
}
