Я хотел бы создать набор классов, который выглядит так:
.mr-s{
margin-right: $space-s;
}
.mr-m{
margin-right: $space-m;
}
.ml-s{
margin-left: $space-s;
}
.ml-m{
margin-left: $space-m;
}
Итак, я пытаюсь создать миксин для этого, но компиляция не выполняется:
$space-s: 0.8rem;
$space-m: 1rem;
$space-l: 2.4rem;
$margin-sizes: s m l;
@mixin margins($direction) {
@each $size in $margin-sizes{
.m#{$direction}-#{$size} {
margin-#{$direction}: $space-#{$size};
}
}
Возможно ли динамическое создание имени переменной ($ space-s, $ space-m)?
Это не удается, даже если я использую фиксированное значение для размера
Помните, что если вы поместите символ $
в слово, оно преобразует его в переменную, поэтому, если вы разделите элементы этого слова и добавите $
в один раздел, отделенный от другого пробелом, они станут разными элементами.
То же самое не происходит со свойствами, потому что то, что вы соединяете или наклоняете, - это строки.
$space-s: 0.8rem;
$space-m: 1rem;
$space-l: 2.4rem;
$margin-sizes: s m l;
@mixin margins($direction) {
@each $size in $margin-sizes{
.m#{$direction}-#{$size} {
margin-#{$direction}:$space-s;
}
.m#{$direction}-#{$size} {
margin-#{$direction}:$space-m;
}
.m#{$direction}-#{$size} {
margin-#{$direction}:$space-l;
}
}
}
.myclass{
@include margins(right);
}
Результат будет таким:
.class .mright-s {
margin-right: 0.8rem;
}
.class .mright-s {
margin-right: 1rem;
}
.class .mright-s {
margin-right: 2.4rem;
}
.class .mright-m {
margin-right: 0.8rem;
}
.class .mright-m {
margin-right: 1rem;
}
.class .mright-m {
margin-right: 2.4rem;
}
.class .mright-l {
margin-right: 0.8rem;
}
.class .mright-l {
margin-right: 1rem;
}
.class .mright-l {
margin-right: 2.4rem;
}