우리가 호출 할 때 몇 가지 규칙을 적용하는 SASS mixin

Question

변수가 어떤 값과 같은지 몇 가지 CSS 규칙을 적용하는지 묻는 SASS/Less 믹스를 만들고 싶습니다.

@mixin myTest($myVar: $num) { 
    @if ($myVar == $num) { 
     /* Apply rules if $myVar is set $num - I DO NOT KNOW WHAT SHOULD BE THERE */ 
    } @else { 
     /* Do nothing */ 
    } 
} 

그리고 내 믹스 인이 방법을 사용하고 싶습니다 :

$num: 1; 

@include myTest(1) { 
    h1 { 
     color: blue; 
     background: red; 
    } 
} 

@include myTest(2) { 
    h1 { 
     color: yellow; 
     background: green; 
    } 
} 

은 그래서 @include myTest(1) { ... }의 괄호 안에 규칙 만 적용됩니다.

문제는 그 방법을 모릅니다.

Answer 1

이

도움이

$num: 1; 
@mixin myTest($myVar: $num) { 

    @if ($myVar == $num) { 
     /* Apply rules if $myVar is set $num - I DO NOT KNOW WHAT SHOULD BE THERE */ 
     @content; // this is how you get it in here 
    } @else { 
     /* Do nothing */ 
    } 
} 

@include myTest(1) { 
    h1 { 
    background:red; 
    } 
} 

@include myTest(2) { 
    h1 { 
    background:blue; 
    } 
} 

https://codepen.io/anon/pen/YEJKRm

희망을 통해 밀어 당신의 믹스 인에 있던 모든 것을 얻을 믹스 인

Answer 2

나는 완전히 당신의 질문을 이해 한 아주 잘 모르겠지만, 당신이 당신의 믹스 인 내부에 CSS 규칙 이동하기 만하면 무엇처럼 보인다 : 당신은 기억 하시죠 @content 사용하는 neeed

@mixin myTest($num) { 
    @if $num === 1 { 
     color: blue; 
     background: red; 
    } @else { 
     color: yellow; 
     background: green; 
    } 
} 


$num: 1; 
h1 { 
    @include myTest($num); 
} 

Answer 3

myTest은 $myVar 값을 확인하고 @content을 통해 전달 된 CSS 규칙을 적용합니다 (documentation 참조).

@mixin myTest($myVar: $num) { 
    @if ($myVar= $num) { 
    @content; 
    } 
} 

$num: 1; 

@include myTest(1) { 
    h1 { 
    color: blue; 
    background: red; 
    } 
} 

@include myTest(2) { 
    h1 { 
    color: yellow; 
    background: green; 
    } 
}