SASS 규칙 재사용

Question

다른 색상의 아이콘 세트가 있으며 각 색상은 CSS 클래스로 선언 된 다른 상태로 사용됩니다. 예를 들어 <span class="icon icon--app"><span>은 회색 앱 아이콘이고, <span class="icon icon--app icon__light icon__selected"><span>은 흰색 앱 아이콘입니다.

다음 코드는 SCSS로 작성되었습니다.

span.icon { 
    display: inline-block; 
    width: 32px; 
    height: 32px; 

    &.icon--app { 
     background: url(../images/app_gray.png); 

     &.icon__selected { 
      background: url(../images/app.png); 
     } 

     &.icon__light { 
      background: url(../images/app_gray.png); 

      &.icon__selected { 
       background: url(../images/app_white.png); 
      } 
     } 
    } 

    &.icon--device { 
     background: url(../images/device_gray.png); 

     &.icon__selected { 
      background: url(../images/device.png); 
     } 

     &.icon__light { 
      background: url(../images/device_gray.png); 

      &.icon__selected { 
       background: url(../images/device_white.png); 
      } 
     } 
    } 
} 

문제는, app 및 device 및 기타 아이콘에 대한 많은 유사성을 공유 위와 같이 CSS 규칙의 긴 목록이있다. SASS를 사용하여 CSS 규칙을 단순화 할 수 있을지 궁금합니다.

Answer 1

나는 당신을 위해 믹스 인을 만들어? 나는 그것이 필요한 것 이상을 생성하고 있다고 생각한다. 이 질문은 CodeReview.SE에 더 적합 할 수 있습니다 (전송하려면 MOD에게 탄원서를 제출해야합니다).

Answer 2

난 당신이 말대꾸에 mixin을 사용할 수 있다고 생각 :

예를 들어,

@mixin icon($type) { 
    &.icon--#{$type} { 
    background: url(../images/#{$type}_gray.png); 

    &.icon__selected { 
     background: url(../images/#{$type}); 
    } 

    &.icon__light { 
     background: url(../images/#{$type}); 

     &.icon__selected { 
     background: url(../images/#{$type}_white.png) 
     } 
    } 
    } 
} 

span.icon { 
    display: inline-block; 
    width: 32px; 
    height: 32px; 

    @include icon(app); 

    @include icon(device); 
}