Less Mixins part #01

믹스인 (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;
  }