Эм, я конечно извиняюсь, что влезаю. Но mixin'ы существуют несколько не для того.
Печатая код на SASS/SCSS, нужно всегда задумываться о том, как он будет выглядеть на выходе.
Кликните сюдаSCSS-код@mixin example{
border: 1px solid red;
}
.class1{
@include example;
}
.class2{
@include example;
}
На выходе CSS-код:.class1{
border: 1px solid red;
}
.class2{
border: 1px solid red;
}
Опа, дубль. Куда лучше было бы в такой ситуации использовать extend'ы:
Теперь сюдаSCSS-код%_example{
border: 1px solid red;
}
.class1{
@extend %_example;
}
.class2{
@extend %_example;
}
На выходе CSS-код:.class1, .class2{
border: 1px solid red;
}
Так для чего же нужны mixin'ы? Они нужны в двух случаях.
- Когда не подойдет использование групповых селекторов.
- Когда мы можем составить шаблон из свойств, но заранее не знаем какие будут их значения. То есть, когда мы в mixin будем передавать аргументы.
_
Ну и сюдаSCSS-код@mixin example($width, $color){
border: $width solid $color;
}
.class1{
@include example(1px, red);
}
.class2{
@include example(2px, yellow);
}
На выходе CSS-код:.class1{
border: 1px solid red;
}
.class2{
border: 2px solid yellow;
}
