(2)sass의 @mixin

효과적인 유지보수와 개발 프로젝트를 위해 코드의 중복 이용이 특히 중요하다.Sass에서 @import과 @extend을 제외하고는 당신의 코드를 더욱 중복 이용성을 가지게 할 수 있습니다. @mixin 지령도 당신의 코드의 중복 사용률을 높일 수 있고 당신의 코드를 간소화할 수 있습니다.
@extend 명령은 계승을 통해 코드를 간소화하지만, 결함도 있습니다. 첫째, 유연성이 부족하고, 둘째, 필요하지 않은 다른 곳에서 같은 클래스를 가진 양식도 계승합니다.@mixin 명령은 코드를 간소화하는 또 다른 방법이다.Mixins는 모든 컨텐츠를 포함하고 매개 변수를 전달할 수 있으므로 @extend보다 훨씬 유연하고 강력합니다.

Mixins 정의

@mixin에 이름을 붙이는 방식으로 Mixins 모듈을 정의할 수 있으며, 모듈에 반복해서 사용하고 싶은 스타일을 추가할 수 있습니다.

@mixin button {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
}

역사적 원인으로 인해 문자와 밑줄이 같은 것으로 여겨진다. 즉, @mixin button-large { }과 @mixin button_large { }은 같은 것이다.

@mixin link {  
    a {  
        color: blue;

        &:visited {
            color: purple;
        }  
        &:hover {
            color: white;
        }  
        &:active {
            color: red;
        }  
    }
}

@mixin 명령 사용하기

너는 @include을 통해 같은 이름을 가진mixin 모듈을 호출할 수 있다.

.button-green {  
    @include button;  
    background-color: green;  
}

예를 들어 @include을 통해 button이라는 Mixin 모듈을 호출하면 해석된 CSS는 다음과 같다.

.button-green {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background-color: green;  
}

예상한 바와 같이 @include은 button이라는 혼합 모듈 내의 양식으로 대체되었다.동시에 내가 .button-green에 첨가한 background-color 양식은 여전히 보존되어 있다.
믹스 모듈의 정의에는 다른 믹스도 포함될 수 있습니다.예를 들면 다음과 같습니다.

@mixin button-blue {  
    @include button;  
    @include link;  
}

그래서 당신은 다양한 간단한mixin 모듈을 포함하는 방식으로 비교적 복잡한mixin 모듈을 만들 수 있습니다.Mixins 모듈에 선택기와 규칙 집합, 즉 Mixins가 포함하는 내용 자체가 유효한 CSS 스타일일 때 그들은 다른 규칙 집합 밖에서 호출될 수 있다.예를 들어 본문 이전에 만들어진 링크 이름의mixin 모듈:

@mixin link {  
    a {  
        color: blue;

        &:visited {
            color: purple;
        }  
        &:hover {
            color: white;
        }  
        &:active {
            color: red;
        }  
    }
}

이후에 우리는 선택기 안에 있지 않아도 이 모듈을 직접 호출할 수 있다.

@include link;

이 코드는 다음과 같이 처리됩니다.

a {  
    color: blue;

    &:visited {
        color: purple;
    }  
    &:hover {
        color: white;
    }  
    &:active {
        color: red;
    }  
}

이렇게 호출할 수 있는 이유는 이mixin 모듈에 선택기도 포함하고 스타일도 포함되어 있기 때문입니다. 선택기가 없으면 컴파일한 후에 내용이 표시되지 않습니다.예를 들어 우리는 선택기 밖에서 button이라는 믹스 모듈을 직접 호출하면 컴파일된 것이 없을 것이다.

@mixin button {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
}

@include button;

컴파일되지 않는 것은 당신의 스타일이 어떤 요소에도 적용되지 않았기 때문입니다.
매개변수 사용
Mixins는 매개변수를 수신하고 사용할 수 있으므로 @extend보다 강력하고 유연합니다.나는 이전의 button 모듈을 업데이트하여 background이라는 파라미터를 추가하여 모듈에 전달했다.

@mixin button($background) {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background: $background;  
}

매개 변수가 변수로 설정되어 backround 속성의 값이 되는 것을 주의하십시오.녹색 버튼을 만들려면 다음 코드를 사용할 수 있습니다.

.button-green {  
    @include button(green);  
}

Sass가 컴파일되었을 때 값 green은 @mixin에 전달되었고 변수 $backround의 값이 되었다.컴파일된 코드는 다음과 같습니다.

.button-green {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background: green;  
}

너는 또한 @mixin과 @include에서 여러 개의 매개 변수를 전달할 수 있으며, 매개 변수 사이를 쉼표로 구분할 수 있다.예를 들면 다음과 같습니다.

@mixin button($background, $color) {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: $color;  
    background: $background;  
}

.button-green {  
    @include button(green, #fff);  
}

매개 변수에 기본값 설정

믹스를 정의할 때 인자를 정의했지만 @include 호출할 때 인자를 전달하지 않으면 어떻게 될지 궁금할 수도 있습니다.이런 상황에서 너는 컴파일 오류에 대한 힌트를 받을 것이다.동시에 나는 이런 상황이 반드시 네가 보고 싶은 것이 아니라고 믿는다.mixin에서 인자를 정의할 때 기본값을 설정해서 오류를 피할 수 있습니다.

@mixin button($background: green) {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background: $background;  
}

지금 호출할 때 매개 변수 값을 전달하는 것을 잊어버리면

.button-green {  
    @include button;  
}

코드는 당신이 설정한 매개 변수의 기본값을 사용하여 해석됩니다. 이 예에서 green입니다.

.button-green {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background: green;  
}

물론, 이 기본값을 덮어쓰는 매개 변수 값을 제공할 수도 있습니다.

.button-blue {  
    @include button(blue);  
}

이 때 당신이 제공한 값을 사용하여 코드를 컴파일할 것입니다

.button-blue {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background: blue;  
}

키워드 매개 변수

코드를 이해하기 쉽게 돕기 위해서,mixin에 값을 전달할 때, 매개 변수의 이름과 매개 변수의 값을 함께 전달할 수 있습니다.

.button-green {  
    @include button($background: green, $color: #fff);  
}

키워드 파라미터는 코드를 추가로 추가하지만, 이것은 @include을 더욱 쉽게 이해할 수 있도록 합니다.예를 들어 위의 코드는 아래의 코드보다 이해하기 쉽다. 왜냐하면 위의 코드는 green과 #fff이 각각 무엇인지 명확하게 지적했기 때문이다.

.button-green {  
    @include button(green, #fff);  
}

선택기의 명칭은 우리에게 단서를 주었고 첫 번째 파라미터가 무엇을 대표하는지 대충 추측할 수 있지만 두 번째 파라미터에 대해서는 아무런 제시 작용이 없고 1년 후에는 이 파라미터의 의미를 기억하지 못할 가능성이 높다.
키워드 이름과 값을 함께 전달하는 것도 이름 매개 변수라고 하는데, 이름 매개 변수를 임의의 순서로 전달할 수도 있다.다음 두 가지 전달 방식을 해석하면 같은 결과를 얻을 수 있다.

.button-green {  
    @include button($background: green, $color: #fff);  
}

.button-green {  
    @include button($color: #fff, $background: green);  
}

가변 수량 매개변수