mixins 목록에 대해 클래스를 여러 번 생성하려면 어떻게해야합니까?

Question

저는이 프로젝트의 개발자 중 하나입니다. SASS는 디자이너가 제공했습니다. SASS의 기본 사항 만 알고 있으므로 가능한지 확실하지 않습니다.

나는 여러 번 생성하려는 클래스가 있으며 클래스 이름은 mixin에 따라 변경되어야합니다.

@include small-tablet, mobile 
{ 
    table.responsive-@mixin-name 
    { 
     display: block; 
    } 
} 

그리고 출력이 뭔가이 있어야한다 :

@media only screen and (max-width:767px) 
{ 
    table.responsive-small-tablet 
    { 
     display: block; 
    } 
} 

@media only screen and (max-width:480px) 
{ 
    table.responsive-mobile 
    { 
     display: block; 
    } 
} 

@mixin small-tablet 
{ 
    @media only screen and (max-width:767px) 
    { 
     @content; 
    } 
} 

@mixin mobile 
{ 
    @media only screen and (max-width:480px) 
    { 
     @content; 
    } 
} 

이 내가 추가 할 부분이 (의사 코드)입니다 :

이

은 유지 mixin 있습니다

어떻게 결과를 얻을 수 있습니까?

Answer 1

당신은 결과이 방법

$mobile: 480; 
$smalltablet: 767; 


@mixin mq($width) { 
    @media only screen and (max-width:#{$width}px) { 
     @content; 
    } 
} 

@mixin generateMediaqueries { 
    @include mq($mobile) { 
     &-mobile { 
     @content; 
     } 
    } 
    @include mq($smalltablet) { 
     &-small-tablet { 
     @content; 
     } 
    } 
} 

table.responsive { 
    @include generateMediaqueries { 
    display: block; 
    } 
} 

---

에 시도 할 수 출력 :

@media only screen and (max-width: 480px) { 
    table.responsive-mobile { 
    display: block; 
    } 
} 
@media only screen and (max-width: 767px) { 
    table.responsive-small-tablet { 
    display: block; 
    } 
}