클래스를 기반으로 Sass에서 변수 정의

Question

클래스가 설정되었는지 여부에 따라 Sass에서 변수를 정의 할 수 있는지 알고 싶습니다. 일부 글꼴 유형 테스트를 수행해야하며 본문 클래스를 기반으로 글꼴 변수 $basicFont을 동적으로 변경하고 싶습니다.

예컨대 :

$basicFont: Arial, Helvetica, sans-serif; 

body { 
    &.verdana { 
     $basicFont: Verdana, sans-serif; 
    } 
    &.tahoma { 
     $basicFont: Tahoma, sans-serif; 
    }  
} 

말대꾸에서이 문제를 처리 할 가능성이 있습니까?

Answer 1

아니요. Sass가 DOM에 대해 알고 있어야합니다. Sass는 CSS로만 컴파일되므로 브라우저로 전송되지 않습니다.

샘플 코드로 매번 $basicFont을 덮어 쓰는 것만으로 충분합니다. 버전 3.4 이상에서는 변수가 설정된 블록의 범위 내에 만 존재합니다.

그래서 실제 옵션은 믹스 인 또는 확장을 사용하는 것입니다.

연장자

이것은 매우 효과적이지만 아주 간단한 경우에만 적합합니다.

%font-family { 
    &.one { 
     font-family: Verdana, sans-serif; 
    } 

    &.two { 
     font-family: Tahoma, sans-serif; 
    } 
} 

.foo { 
    @extend %font-family; 
} 

출력 :

.one.foo { 
    font-family: Verdana, sans-serif; 
} 
.two.foo { 
    font-family: Tahoma, sans-serif; 
} 

믹스 인

이 당신이변수가 사용되는 동안 좀 더 세밀한 제어를 원한다면 내가 추천하는 방법입니다.

$global-themes: 
    ('.one': ('font-family': (Verdana, sans-serif), 'color': red) 
    , '.two': ('font-family': (Tahoma, sans-serif), 'color': blue) 
    ); 

$current-theme: null; // don't touch, this is only used by the themer mixin 

@mixin themer($themes: $global-themes) { 
    @each $selector, $theme in $themes { 
     $current-theme: $theme !global; 
     &#{$selector} { 
      @content; 
     } 
    } 
} 

@function theme-value($property, $theme: $current-theme) { 
    @return map-get($theme, $property); 
} 

.foo { 
    @include themer { 
     font-family: theme-value('font-family'); 

     a { 
      color: theme-value('color'); 
     } 
    } 
} 

출력 :

.foo.one { 
    font-family: Verdana, sans-serif; 
} 
.foo.one a { 
    color: red; 
} 
.foo.two { 
    font-family: Tahoma, sans-serif; 
} 
.foo.two a { 
    color: blue; 
}