LESS에서 if 문을 사용하는 방법

LESS에서 if 문을 사용하는 방법

---

나는 background-color다른 div요소 를 제어하기 위해 일종의 if 문을 찾고 있습니다.

아래를 시도했지만 컴파일되지 않습니다.

@debug: true;

header {
  background-color: (yellow) when (@debug = true);
  #title {
      background-color: (orange) when (@debug = true);
  }
}

article {
  background-color: (red) when (@debug = true);
}

---

LESS에는 개별 속성이 아닌 믹스 인에 대한 가드 표현식 이 있습니다.

따라서 다음과 같은 믹스 인을 생성합니다.

.debug(@debug) when (@debug = true) {
    header {
      background-color: yellow;
      #title {
          background-color: orange;
      }
    }

    article {
      background-color: red;
    }
}

그리고 호출하여 또는 해제를 켜 .debug(true);거나 .debug(false)(전혀 그것을 호출 여부).

---

개별 (또는 여러) 속성에 가드를 사용하는 방법이 있습니다.

@debug: true;

header {
    /* guard for attribute */
    & when (@debug = true) {
        background-color: yellow;
    }
    /* guard for nested class */
    #title when (@debug = true) {
        background-color: orange;
    }
}

/* guard for class */
article when (@debug = true) {
    background-color: red;
}

/* and when debug is off: */
article when not (@debug = true) {
    background-color: green;
}

... 그리고 1.7 미만; 다음으로 컴파일됩니다.

header {
    background-color: yellow;
}
header #title {
    background-color: orange;
}
article {
    background-color: red;
}

---

나는 같은 질문을 우연히 발견했고 해결책을 찾았습니다.

먼저 최소한 LESS 1.6으로 업그레이드하십시오. npm그 경우에 사용할 수 있습니다 .

이제 다음 믹스 인을 사용할 수 있습니다.

.if (@condition, @property, @value) when (@condition = true){
     @{property}: @value;
 }

LESS 1.6부터는 Mixins에도 PropertyNames를 전달할 수 있습니다. 예를 들어 다음을 사용할 수 있습니다.

.myHeadline {
   .if(@include-lineHeight,  line-height, '35px');
}

If @include-lineheight resolves to true LESS will print the line-height: 35px and it will skip the mixin if @include-lineheight is not true.

---

I wrote a mixin for some syntactic sugar ;)
Maybe someone likes this way of writing if-then-else better than using guards

depends on Less 1.7.0

https://github.com/pixelass/more-or-less/blob/master/less/fn/_if.less

Usage:

.if(isnumber(2), {
    .-then(){
        log {
            isnumber: true;
        }
    }
    .-else(){
        log {
            isnumber: false;
        }
    }
});

.if(lightness(#fff) gt (20% * 2), {
    .-then(){
        log {
            is-light: true;
        }
    }
});

using on example from above

.if(@debug, {
    .-then(){
        header {
            background-color: yellow;
            #title {
                background-color: orange;
            }
        }
        article {
            background-color: red;
        }
    }
});

ReferenceURL : https://stackoverflow.com/questions/14910667/how-to-use-if-statements-in-less