Question

所以我有一个很长的样式表，我在Reddit上用于subreddit并且更容易编辑，它在LESS的自定义版本中。基本上我添加一点，通过一个JS脚本（使用Node），将其转换为LESS，然后将其转换为CSS。但它吐出的线数至少比它应该多8行。

LESS：

.flair {
    height: 30px;
    width: 30px;
    display: inline-block;
    padding: 0;
    border: 0;
    text-indent: -999em;
    font-size: 0;
    background-image: url(%%SPRITE%%) !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    vertical-align: middle;
}

.flairthree {
    margin-left: 31px;
    margin-right: 35px;
    &::before,&::after {
        .flair;
        content: "";
        position: relative;
        display: block;
    }
    &::before { left: -31px; }
    &::after  { right: -31px; top: -30px; }
}

.flair.flair-blackwidow     {   background-position: 0  -120px; }
.flair.flair-captainamerica {   background-position: 0  -210px; }
.flair.flair-ironman        {   background-position: 0  -660px; }

.flair.flair-basic {
    .flairthree;
    .flair.flair-captainamerica;
    &::before { .flair.flair-ironman; }
    &::after  { .flair.flair-blackwidow; }
}

然后吐出：

.flair.flair-basic {
    margin-left: 31px;
    margin-right: 35px;
    background-position: -0 -210px;
}

.flair.flair-basic::before,
.flair.flair-basic::after {
    height: 30px;
    width: 30px;
    display: inline-block;
    padding: 0;
    border: 0;
    text-indent: -999em;
    font-size: 0;
    background-image: url(%%SPRITE%%) !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    vertical-align: middle;
    content: "";
    position: relative;
    display: block;
}
.flair.flair-basic::before {
    left: -31px;
}
.flair.flair-basic::after {
    right: -31px;
    top: -30px;
}
.flair.flair-basic::before {
    background-position: 0 -660px;
}
.flair.flair-basic::after {
    background-position: 0 -120px;
}

正如您所看到的，CSS有两个额外的选择器，分别用于::before和::after。无论如何，我可以不同地编写LESS样式以获得相同的结果减去8行？我会写更多的JavaScript，但它太复杂和困难。

从LESS压缩CSS

0 个答案: