如何用 sass 简化这个 css？答案

【问题标题】：How do I simplify this css with sass?如何用 sass 简化这个 css？
【发布时间】：2015-01-28 11:31:17
【问题描述】：

我有一个css 文件，我想用sass 简化它，一些sn-p 如下：

.slick-prev, .slick-next {
    height: 30px !important;
}
.slick-prev:before, .slick-next:before {
    color: #fff !important;
    font-size: 30px !important;
}
.slick-prev:before {
    content: "\f104" !important;
    font-family: "FontAwesome" !important;
}
.slick-next:before {
    content: "\f105" !important;
    font-family: "FontAwesome" !important;
}

所以，区别只是content: "\f104"不同，所以我试着简化一下：

.slick-prev, .slick-next {
    height: 30px !important;

    &:before {
        color: #fff important;
        font-size: 30px !important;

        // how can I write here?
    }
}

如何判断父母是.slick-next:before还是.slick-prev:before？

【问题讨论】：

标签： css sass compass-sass

【解决方案1】：

如何判断父母是.slick-next:before还是.slick-prev:before？

你不能。

这是你可以简化的：

.slick-prev, .slick-next {
    height: 30px !important;

    &:before {
        color: #fff !important;
        font-size: 30px !important;
        font-family: "FontAwesome" !important;
    }
}
.slick-prev:before {
    content: "\f104" !important;
}
.slick-next:before {
    content: "\f105" !important;
}

【讨论】：