Миксины в SASS: когда пора остановиться?

Question

[rtfm mftr]

Влюбился в миксины до такой степени что уже каждое свойство в них заворачиваю.
Например:
+circle вместо border-radius: 50%
+border вместо border: 1px solid red //для отладки
+block вместо display: block
+pseudo вместо position: absolute; content: ""
+v-center вместо position: absolute; top: 50%, transform: translateY(-50%)
и т. д.
Это нормально или уже слишком?

Comments

[rtfm mftr]

Pavel Ustyugov: никакую, сам пишу

Answer 1

[Виталий Инчин ☢]

Эм, я конечно извиняюсь, что влезаю. Но 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'ы? Они нужны в двух случаях.

1. Когда не подойдет использование групповых селекторов.
   
2. Когда мы можем составить шаблон из свойств, но заранее не знаем какие будут их значения. То есть, когда мы в 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;
}

Comments

[Август Милович]

Не вижу ничего плохого в дубле, все умеют пользоваться сборщиками, которые как известно всё сократят, да и с дублированием код более читаемый, чем с наследованием.

[Виталий Инчин ☢]

Август Милович, читаемы оба примера одинаково. Но можно резать стейк ножом, а можно бензопилой. Миксины нужны для других ситуаций. Я привел пример для каких

[Vaultboy84]

Август Милович, Дублирование увеличивает размер файла и прививает плохие практики, а человек очень грамотно все обьяснил.

Answer 2

[Алексей Николаев]

Имхо, миксины имеют смысл в случае, когда применяемых свойств несколько, или когда свойство \ набор свойств применяются к однотипному набору объектов. Например, миксин box-shadow имеет смысл, если там юзается фоллбэк с filter для IE.

Из перечисленного я бы оставил только миксин v-center.

Comments

[Сергей Горячев]

Полностью соглашусь с ответом, тут только одна полезная хрень с позиционированием.
Ну и бордер-радиус, при условии, что у вас там этих кружочков тьма тьмущая.

[Сергей Горячев]

+block вместо display: block , а это просто убило) Зачем?)))

[rtfm mftr]

Sergey Goryachev: фигзнает, просто короче запись)