如何使用sass簡化此CSS？

Question

我有一個css文件，我想用sass來簡化它，一些代碼片段如下：

.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 ？

Answer 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;
}