Sass-миксин для генерации классов

Я хотел бы создать набор классов, который выглядит так:

.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};
  }
}
  1. Возможно ли динамическое создание имени переменной ($ space-s, $ space-m)?

  2. Это не удается, даже если я использую фиксированное значение для размера

Оптимизируйте свой CSS с помощью Gerillass: Библиотека Sass для эффективной стилизации
Оптимизируйте свой CSS с помощью Gerillass: Библиотека Sass для эффективной стилизации
Если вы планируете стать веб-разработчиком, вы наверняка слышали о CSS - языке, используемом для стилизации HTML-документов. CSS является неотъемлемой...
0
0
25
1

Ответы 1

Помните, что если вы поместите символ $ в слово, оно преобразует его в переменную, поэтому, если вы разделите элементы этого слова и добавите $ в один раздел, отделенный от другого пробелом, они станут разными элементами.

То же самое не происходит со свойствами, потому что то, что вы соединяете или наклоняете, - это строки.

$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;
}

Другие вопросы по теме