Gulp CSS方式在构建过程中分离字体速记

Question

是否有在构建过程中解析出css字体到其独立的部分?

font:500 3em/1.2 Arial, sans-serif;

到

font-weight: 500;
font-size: 3em;
line-height: 1.2;
font-family: Arial, sans-serif;

Answer 1

CSS本身不做解析。有内置的快捷方式，但它们是唯一允许你使用的快捷方式。你不能只用CSS写你自己的东西。

如果您正在使用像SCSS这样的解析语言，您可以编写自己的函数来为您执行此操作:

@mixin my_font_function($weight, $size, $height, $family) {
    font: {
        weight: $weight;
        size: $size;
        family: $family;
    }
    line-height: $height;
}

然后

:

div.class{
    @include my_font_function(500, 3em, 1.2, "Arial, sans-serif");
}

会产生:

div.class {
    font-weight: 500;
    font-size: 3em;
    line-height: 1.2;
    font-family: Arial, sans-serif;
}