Question

我正在尝试创建一个css类，它可以使用数字作为与该类关联的样式的输入。例如：

.font-<size> {
  font-size: <size>px;
}

其中'size'是一个数字。

这可以用scss吗？

我的解决方案：

这就是我最终做的事情，它是硬编码但是完成了工作：

 // Generates some useful quick font size classes
$f-sizes: 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30;
@each $i in $f-sizes {
  &.font-#{$i*2}:before {
    font-size: #{$i*2}px;
  }
}

这将允许我通过类.font-28访问字体大小2到60。

Answer 1

你需要一个mixin。 http://thesassway.com/advanced/pure-sass-functions

@mixin size-mixin($some-number) {
  font-size: $some-number;
}

然后你就可以在课堂上加入这种混合。

.font-class {
  @include size-mixin(10px);
}

Answer 2

$number: 10;

.font-#{$number} {
  font-size: #{$number}px;
}

上面的SCSS代码编译成CSS代码如下：

.font-10 {
  font-size: 10px; }

SCSS类名称，其值为输入

2 个答案: