常用Css类之Sass篇

测试地址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

根据配置字体数组，生成字体大小

/** 生成形如 .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"
}