測(cè)試地址https://www.dute.org/sass-to-css
間距
生成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
根據(jù)配置字體數(shù)組平挑，生成字體大小
/** 生成形如 .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
常用顏色定義和生成
/** 生成 類(lèi)似 .fc999 { color: #999 } 的css文件 */
/** 顏色定義 */
$d3: #333;
$d6: #666;
$d9: #999;
$fff: #fff;
$blue: #2c5cc5;
$org: #ff6c37;
$red: #ea5a5c;
$green: #29b87a;
/** 采用的顏色key以及對(duì)應(yīng)的色值 */
$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"
}
