Sass를 사용하여이 CSS를 어떻게 단순화합니까?

Question

내가 sass으로 단순화하려는 css 파일이 일부 조각은 다음과 같다 :

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