CODEWITHSUNDEEP
csssasscompass-sass
roger
roger

Reputation: 9893

How do I simplify this css with sass?

I have a css file which I want to simplify it with sass, some snippet is as follow:

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

so, the difference is only different in content: "\f104", so I tried to simplify it:

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

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

        // how can I write here?
    }
}

How can I judge the parent is .slick-next:before or .slick-prev:before?

Upvotes: 0

Views: 84

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240868

How can I judge the parent is .slick-next:before or .slick-prev:before?

You can't.

This is as far as you can simplify it:

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

Upvotes: 1

Related Questions