Как настроить структуру кода и миксины?

Question

[Andrej Sharapov]

Ребята, только начал изучать scss и gulp, но не совсем понял принцип работы миксинов.
Как правильно сделать, чтобы в css все вставало на места?

Я сделаю так:

@mixin bShad($box-shadow) {
	-webkit-box-shadow: $box-shadow;
	-moz-box-shadow: $box-shadow;
	box-shadow: $box-shadow;
}
.block-1 {
	@include bShad(0px 0px 20px 0px rgba(150, 150, 150, 0.1) );
}
.block-2 {
	@include bShad(0 10px 40px 0 rgba(62, 57, 107, 0.07), 0 2px 9px 0 rgba(62, 57, 107, 0.06));

При вводе второго класса выходит ошибка "wrong number of arguments (2 for 1) for `bShad'". Если я убираю 2 класс, все работает.
И еще подскажите, как добавить свойства ниже к первому классу:

transition: -webkit-transform 0.2s ease-in-out,-webkit-box-shadow 0.2s ease-in-out;
			transition: transform 0.2s ease-in-out,box-shadow 0.2s ease-in-out;
			will-change: transform,box-shadow;

В результате должно скопилироваться в:

.block-1 {
  -webkit-box-shadow: rgba(150, 150, 150, 0.1) 0px 0px 20px 0px;
  -moz-box-shadow: rgba(150, 150, 150, 0.1) 0px 0px 20px 0px;
  box-shadow: rgba(150, 150, 150, 0.1) 0px 0px 20px 0px;
  transition: -webkit-transform 0.2s ease-in-out,-webkit-box-shadow 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out,box-shadow 0.2s ease-in-out;
  will-change: transform,box-shadow;
}
.block-2 {
  -webkit-box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.07), 0 2px 9px 0 rgba(62, 57, 107, 0.06);
  -moz-box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.07), 0 2px 9px 0 rgba(62, 57, 107, 0.06);
  box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.07), 0 2px 9px 0 rgba(62, 57, 107, 0.06);
}

Спасибо!

Answer 1

[doweb]

Добрый день.
Если вы используете данный миксин, чтобы свойство было с перфиксами, то думаю, что это не лучший вариант. Просто используйте gulp-autoprefixer.

Если же говорить об ошибке, то она в следующем.
Консоль выдает ошибку о том, что вы пытаетесь передать два аргумента, а миксин принимает только один параметр. В Вашем случае, Вам просто нужно передаваемый агрумент обернуть в дополнительные скобки ( )

Пример:

@include bShad((0 10px 40px 0 rgba(62, 57, 107, 0.07), 0 2px 9px 0 rgba(62, 57, 107, 0.06))

Comments

[Andrej Sharapov]

Спасибо, помогло!
Сделал так

@include bShad((0 10px 40px 0 rgba(62, 57, 107, 0.07), 0 2px 9px 0 rgba(62, 57, 107, 0.06)));

Я пока не научился использовать чужие пакеты) Пытаюсь создать свой для проекта.