mixins를 사용하여 변수 값을 변경하십시오.

Question

저는 일반적으로 새로운 것을 신기하고, mixins를 사용하여 새로운 변수 값을 정의 할 수 있는지 궁금합니다.

저는 건물 웹 사이트 전체에 패딩 크기를 정의하는 변수를 사용하는 것이 좋을 것이라고 생각했습니다. 믹싱 및 미디어 쿼리를 사용하여 새로운 가치를 정의 할 수있는 아이디어입니다. 작동 방법이 나는 이것이 매우 유용 할 것이라고 생각하지만 ... 동작하지 않습니다

$site-padding: 40px; 

@include media-over-767 { 
    $site-padding: 20px; 
} 

:

예는 더 적합 할 수 있습니다?

Answer 1

@mixin site-padding{ 
    $site-padding: 20px; 
} 

@include media-over-767 { 
    @include site-padding; 
} 

Answer 2

중단 점 내에 변수 sass을 설정할 수 없습니다. 이 역시 당신은 단순히

$site-padding: 40px; 
$site-padding-sm: 20px; 

@include media-over-767 { 
    padding: $site-padding-sm; 
} 

할 수 https://github.com/sass/sass/issues/1227

를 의뢰 - -

이 문제를 참조 Using Sass Variables with CSS3 Media Queries

Answer 3

나는 이것이 당신이 찾고 정확히 경우 확실하지 않다, 그러나 희망을 당신을 올바른 길로 인도합니다. 믹스 인 선언 :이 예에서

@mixin site-padding($padding:40px) { 
    padding: $padding; 
} 

을, 나는 40px의 기본 값으로 믹스 인 site-padding을 설정합니다.

귀하의 SASS는 다음과 같이 보일 것입니다 :

.element { 
    // Small screens 
    @include site-padding(20px); 

    // Over 767px 
    @media screen and (min-width: 768px) { 
     // Defaults to 40px. 
     @include site-padding(); 
    } 
}