Функция Sass для получения значения из класса

Question

II имеют следующие классы:

• ч-10
• ч-100
• ч-170
• ч-380

Возможно ли иметь функцию sass, которая будет видеть 'h-', а затем захватывать значение и затем что-то делать?

Я надеюсь добавить высоты в контейнер.Наша CMS (AEM) позволит мне записывать классы на основе раскрывающегося значения.

Answer 1

Вы можете использовать список и каждую директиву .

$sizes: 10, 100, 170, 380;

@each $size in $sizes {
  .h-#{$size} {
    height: ($size * 1px);
  }
}

---

Выход

.h-10 {
  height: 10px;
}

.h-100 {
  height: 100px;
}

.h-170 {
  height: 170px;
}

.h-380 {
  height: 380px;
}

Answer 2

Я думаю str-slice($string, $start-at, [$end-at]) должен делать то, что вы ищете.Примерно так:

/* Pass in your classes */
@mixin containerHeights($classes) {
    /* Loop over each one */
    @each $class in $classes {
        /* Grab everything starting at the 3rd character
        $height: str-slice($class, 3);

        /* build your classes from the list */
        .#{$class} {
            height: #{$height}px;
        }
    }
}

Теперь вы сможете использовать свой миксин так:

@include containerHeights(h-10 h-100 h-170 h-380);

Скомпилированный результат будет выглядеть так:

.h-10 {
    height: 10px;
}
.h-100 {
    height: 100px;
}
.h-170 {
    height: 170px;
}
.h-380 {
    height: 380px;
}