Изменяемые имена смешивания менее возможны?
-
30-09-2019 - |
Вопрос
То, что я хочу сделать, это создать микс, который принимает аргументы и использует один или несколько аргументов в качестве имен для других смесилей для включения.
Поскольку я не уверен в правильных условиях, я постараюсь объяснить через пример:
@gradients{
light:#fafafa; //Should these also be prefixed with @?
dark:#888888;
}
@gradientBackground(@name,@height){
background-image:url('../img/gradients/{@name}-{@height}.png'); //this works
background-color:@gradients[@name];
}
.someBox{
@gradientBackground(light;150);
}
//Expected result:
.someBox{
background-image:url('../img/gradients/light-150.png'); //This works
background-color:#fafafa; //This doesn't work.
}
Изображение работает, но я еще не разобрался, как ссылаться на соответствующий цвет из @gradients
. Отказ Это вообще возможно?
Решение
Я не думаю, что вам понадобится вариабельность @gradients вообще. Просто определите ваши переменные:
@light:#fafafa;
@dark:#888888;
Ваш микс не должен начинаться с @, который определяет переменную. Микс в основном просто класс.
.gradientBackground(@name:@dark, @height:500){
background-image:url('../img/gradients/{@name}-{@height}.png');
background-color:@name;
}
Так же, как пример, я устанавливаю атрибуты для смесина, чтобы быть цветом @Dark и 500 для высоты.
Затем, когда вы хотите использовать свой микну в другом определении, это было бы так:
.somebox {
.gradientBackground(@light, 150);
}
Поэтому в точке вы использовали смеси, вы можете сохранить значения по умолчанию, либо передавать новые (т. Е. @Light & 150)
Надеюсь, это поможет!