function - 在 Compass/SASS 中调用函数

Question

我想在 SASS 中创建一个生成不同类的函数。像这样的东西

@function test($class-name) {
    @for $i from 1 through $tot-class {
        .#{$class-name}-#{$i} {
            //some rules
        }
    }
}

但我不知道如何调用这个函数。我试过了

 @test(red);

或者

 test(red);

但它似乎不起作用。哪个是正确的方法？

Answer 1

这里的主要问题是您实际上不想使用function，您想要一个mixin。不同之处在于函数不包含任何 CSS 规则——它们只是返回一个值（您可以将其分配给变量或在 CSS 属性声明中使用）。另一方面，mixin 没有返回值，并且可以包含完整的 CSS 规则，当该 mixin 包含到 SASS 文档中时要添加。这是您的示例作为 mixin 的样子：

@mixin test($class-name) {
    @for $i from 1 through $tot-class {
        .#{$class-name}-#{$i} {
            //some rules
        }
    }
}

然后，您稍后将使用以下方法包含 mixin：

@include test(red);