ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Less Mixins part #01
    CSS Preproseccor/Less 2019. 3. 30. 03:24

    믹스인 (Mixins)

    클래스 선택자와 id 선택자를 혼합할 수 있다.

    • less
      .logo, #title{
        font-weight: 900;
      }
      .mixin-class{
        .logo();
      }
      .mixin-id{
        #title();
      }
    • css
      .logo, #title{
        font-weight: 900;
      }
      .mixin-class{
        font-weight: 900;
      }
      .mixin-id{
        font-weight: 900;
      }
    • 믹스인 호출을 할 때 [.logo(), #title()] 괄호는 선택사항이지만, 더 이상 사용되지 않을 예정이다.*
       .logo();
       .logo; // 정상 작동.

    믹스인을 출력하지 않음 (Not Outputting the Mixin)

    직접 만든 믹스인을 컴파일할 CSS 파일 내부에 포함시키고 싶지 않을 때, 뒤에 괄호를 붙여라.

    • less
      /* 괄호가 없다. */
      .my-mixin {
        color: black;
      }
      /* 믹스인 이름 뒤에 괄호를 붙였다. CSS 파일로 컴파일 시 CSS 파일 내부에 포함되지 않는다. */
      .my-other-mixin() {
        background: white;
      }
      .class {
        .my-mixin();
        .my-other-mixin();
      }
    • css
      .my-mixin {
        color: black;
      }
      .class {
        color: black;
        background: white;
      }

    믹스인 선택자 (Selectors in Mixins)

    믹스인에는 여러 선택자를 포함시킬 수 있다.

    • less
      /* CSS로 컴파일 시 CSS 파일 내부에 포함되지 않는다. */
      .my-hover-mixin() {
        &:hover {
          border: 1px solid red;
        }
      }
      button {
        /* 믹스인 이름 뒤에 괄호를 붙여 호출했다. 위에서 언급했던 옵션. */
        .my-hover-mixin();
      }
    • css
      button:hover {
        border: 1px solid red;
      }

    네임스페이스 (Namespaces)

    • less
      #outer() {
      .inner {
        color: red;
        }
      }
      /* '>'이것과 공백은 선택 사항 
       * 네임스페이스
       */
      .c {
        #outer > .inner();
      }
    • 모두 똑같이 동작*
       #outer > .inner();
       #outer > .inner;
       #outer .inner();
       #outer .inner;
       #outer.inner();
       #outer.inner;

    보호된 네임스페이스 (Guarded Namespaces)

    네임스페이스에 가드가 있는 경우, 가드 조건이 true 일 경우에만 믹스인을 사용할 수 있다. 네임스페이스 가드는 믹스인에 대한 가드와 정확히 같은 방식으로 평가되므로, 아래의 믹스인은 동일하게 작동한다.

      #namespace when (@mode = huge) {
        .mixin() { /* */ }
      }
    
      #namespace {
        .mixin() when (@mode = huge) { /* */ }
      }

    !important 키워드 (The !important keyword)

    • less
      .foo (@bg: white, @color: red) {
        background: @bg;  // white
        color: @color;  // red
      }
      .unimportant {
        .foo();
      }
      .important {
        .foo() !important;
      }
    • css
      .unimportant {
        background: white;
        color: red;
      }
      .important {
        background: white !important;
        color: red !important;
      }

    'CSS Preproseccor > Less' 카테고리의 다른 글

    Less Variables  (0) 2019.03.28
    CSS Preprocessor [Less]  (0) 2019.03.28

    댓글

Designed by Tistory.