sass
믹스 인

통사론

• @mixin mixin-name ($argument1, $argument, ...){ ... }

믹스 인 만들기 및 사용

믹스 인을 만들려면 @mixin 지시어를 사용하십시오.

@mixin default-box ($color, $borderColor) {
    color: $color;
    border: 1px solid $borderColor;
    clear: both;
    display: block;
    margin: 5px 0;
    padding: 5px 10px;
}

믹스 인 이름 다음에 괄호 안에 인수 목록을 지정할 수 있습니다. 변수를 $ 로 시작하고 쉼표로 구분해야합니다.

다른 선택자에서 mixin을 사용하려면 @include 지시어를 사용하십시오.

footer, header{ @include default-box (#ddd, #ccc); }

믹스 인의 스타일은 지금에 사용되는 footer 및 header 값으로, #ccc 에 대한 $color 변수 #ddd 에 대한 $borderColor 변수입니다.

가변 인자가있는 Mixin

믹스 인 (mixin)에는 사용하는 동안 하나 이상의 인수가있을 수있는 경우가 있습니다. border-radius 와 같은 단일 인수가있을 수있는 border-radius 의 경우를 생각해 봅시다 border-radius:4px; 또는 border-radius:4px 3px 2px 1px; 와 같은 여러 인수 border-radius:4px 3px 2px 1px; .

기존의 키워드 인수 혼합은 아래와 같습니다 : -

@mixin radius($rad1, $rad2, $rad3, $rad4){
 -webkit-border-radius: $rad1 $rad2 $rad3 $rad4;
 -moz-border-radius: $rad1 $rad2 $rad3 $rad4;
 -ms-border-radius: $rad1 $rad2 $rad3 $rad4;
 -o-border-radius: $rad1 $rad2 $rad3 $rad4;
 border-radius: $rad1 $rad2 $rad3 $rad4;
}

그리고로 사용

.foo{
    @include radius(2px, 3px, 5px, 6px)
}

위의 예제는 복잡하며 (코드 작성, 읽기 및 유지), 하나의 값 또는 두 개의 값만 전달할 수없는 경우 오류가 발생하고 하나, 둘 또는 그 값을 사용하려면 세 개의 다른 혼합을 정의해야합니다.

변수 Argument 를 사용하면 몇 개의 인수를 전달할 수 있는지 걱정할 필요가 없습니다. 변수 인수는 변수 이름 뒤에 3 개의 점 (...) 을 정의하여 선언 할 수 있습니다. 다음은 가변 인수의 예입니다.

@mixin radius($radius...)
{  
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    -o-border-radius: $radius;
    border-radius: $radius;
}

그리고로 사용

.foo{
    @include radius(2px 3px 5px 6px)
}
.foo2{
    @include radius(2px 3px)
}
.foo3{
    @include radius(2px)
}

위의 예제는 (코드 작성, 유지 보수 및 읽기) 훨씬 간단하며 인수가 얼마나 될지 걱정할 필요가 없습니다. 하나 이상일 것 입니다.

둘 이상의 인수가 있고 두 번째 인수에 액세스하려는 경우에는 propertyname : nth(variable_name, 2) 를 작성하여 수행 할 수 있습니다.

민감한 기본값

SASS는 물론 덮어 쓸 매개 변수를 제외한 모든 매개 변수를 생략 할 수있는 기능을 제공합니다. default-box 예제를 다시 사용 해보자.

@mixin default-box ($color: red, $borderColor: blue) {
    color: $color;
    border: 1px solid $borderColor;
    clear: both;
    display: block;
    margin: 5px 0;
    padding: 5px 10px;
}

이제 믹스를 두 번째 매개 변수를 덮어 씁니다.

footer, header{ @include default-box ($borderColor: #ccc); }

$borderColor 의 값은 #ccc 이고 $color 는 red 유지됩니다.

선택적 인수

SASS의 선택적 인수를 사용하면 값을 지정하는 경우에만 매개 변수를 사용할 수 있습니다. 그렇지 않으면 무시됩니다. 다음 믹스 인의 예를 들어 봅시다.

@mixin galerie-thumbnail ($img-height:14em, $img-width: null) {
    width: $img-width;
    height: $img-height;
    outline: 1px solid lightgray;
    outline-offset: 5px;
}

그래서

.default { 
  @include galerie-thumbnail; 
}
.with-width { 
  @include galerie-thumbnail($img-width: 12em);
}
.without-height { 
  @include galerie-thumbnail($img-height: null);
}

CSS 파일에 다음을 출력합니다.

.default {
  height: 14em;
  outline: 1px solid lightgray;
  outline-offset: 5px;
}

.with-width {
  width: 12em;
  height: 14em;
  outline: 1px solid lightgray;
  outline-offset: 5px;
}

.without-height {
  outline: 1px solid lightgray;
  outline-offset: 5px;
}

SASS는 값이 null 속성을 출력하지 않으므로 호출시 선택적 인수를 포함해야 할 때 유용합니다.

@content 지시어

믹스 인은 SASS 호환 코드의 블록을 통과 할 수 있으며, 믹스 내에서 @content 지시어로 사용할 수있게됩니다.

@mixin small-screen {
  @media screen and (min-width: 800px;) {
    @content;
  }
}

@include small-screen {
  .container {
    width: 600px;
  }
}

그리고 이것은 다음과 같이 출력됩니다 :

  @media screen and (min-width: 800px;) {
    .container {
      width: 600px;
    }
  }

Mixins은 @content 지시어를 사용할 수 있으며 여전히 매개 변수를 받아들입니다.

@mixin small-screen($offset) {...