从类中获取值的Sass函数

Question

我有以下课程：

• h-10
• 氢-100
• 氢-170
• h-380

有没有可能有一个sass函数，它将看到'h-‘，然后获取值，然后做一些事情？

我希望能给一个容器增加高度。我们的CMS (AEM)将允许我根据下拉值写出类。

Answer 1

我认为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;
}

Answer 2

您可以使用列表和每个指令。

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