дерзкая динамическая ширина

Question

Я использую

.w400 { 
  width: 400px; 
}

.w110 {
  width: 110px;
}

.w600 {
  width: 600px;
}

возможно ли создать динамический класс с sass?

что-то вроде

.w(size) {
    width: size+px
}

Answer 1

Если вы хотите использовать произвольные .w(something) классы, я полагаю (см. Ниже), что это невозможно с Sass. Однако, если вы заранее знаете, какие размеры вам нужны, вы можете использовать mixins с аргументами для генерации классов. Примерно так:

@mixin width-class($size) {
  .w#{$size} {
    width: $size * 1px;
  }
}

Вы бы использовали это так:

@include width-class(400);
@include width-class(110);

Это генерирует следующий CSS:

.w400 {
  width: 400px; }

.w110 {
  width: 110px; }

Теперь, если вы хотите избежать написания новой строки @include для каждого из классов, вы можете создать другие миксины (или объединить два миксина в один):

@mixin dynwidths($size-list) {
  @each $size in $size-list {
    @include width-class($size)
  }
}

Теперь вы можете передать ему список ширин. Это генерирует тот же CSS, что и выше:

@include width-classes(400 110);

---

Примечание: это всего лишь предположение, но имена классов с подстановочными символами могут быть возможны при расширении Sass с помощью Ruby. Однако я не уверен, является ли это желательной функцией.