IT박스

SASS IF 문에서 다중 조건 (AND) 사용

itboxs 2021. 1. 11. 07:52
반응형

SASS IF 문에서 다중 조건 (AND) 사용


SASS를 사용하여 IF 문에 여러 조건을 갖고 싶습니다.

내가 지금 사용하는 것 :

@function color-x ($alpha) {
    @if      $accent == red   {@return red($alpha)} 
    @else if $accent == green {@return green($alpha)} 
    @else if $accent == blue  {@return blue($alpha)}
}

내 순진한 (실패) 여러 조건을 사용하려고 시도합니다.

@function color-x ($alpha) {
    @if      $accent == red   && theme == light {@return red($alpha)} 
    @else if $accent == green && theme == light {@return green($alpha)} 
    @else if $accent == blue  && theme == light {@return blue($alpha)}
}

여러 조건을 가질 수 있습니까?


Sass 언어 참조 문서에서 :

부울 연산

SassScript 지원 and, ornot부울 값에 대한 운영자.

(링크)

따라서 복합 조건이있는 if 문 표현식은 다음과 같습니다.

@if $var1 == value1 and $var2 == value2 {
    // ...
}

또한 괄호를 사용하여 더 복잡한 표현식의 작업 순서에 영향을 줄 수 있습니다.

@if ($var1 == value1 and not ($var2 == value2)) or ($var3 == value3) {
    // ...
} 

다음을 수행 할 수도 있습니다.

@if index("foo" "bar", $value) { .. }

하지만 조심하세요 :

  1. 당신이하려는 일이 분명하지 않을 수도 있습니다.
  2. null부울이 아닌 숫자 또는를 반환합니다 .

참조 URL : https://stackoverflow.com/questions/17225229/using-multiple-conditions-and-in-sass-if-statement

반응형