在Compass/SASS中调用函数 [英] Call a function in Compass/SASS

问题描述

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

I want to create a function in SASS that generates different classes. Something like this

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

但是我不知道如何调用此函数.我尝试过

but i can't figure how to call this function. I've tried with

 @test(red);

或

 test(red);

但是它似乎不起作用.哪种方法是正确的?

but it doesn't seem to work. Which is the right way?

推荐答案

这里的主要问题是您实际上并不想使用 mixin .区别在于，函数不包含任何CSS规则-它们仅返回一个值(您可以将其分配给变量或在CSS属性声明中使用).另一方面，Mixins没有返回值，并且可以包含将成熟的CSS规则添加到SASS文档中时要添加的成熟CSS规则.这是您的示例作为mixin的样子:

The main problem here is that you don't actually want to use a function, you want a mixin. The difference is that functions don't contain any CSS rules - they simply return a value (which you can assign to a variable or use in a CSS property declaration). Mixins, on the other hand, have no return value and can contain full-blown CSS rules to be added when that mixin is included into the SASS document. Here's what your example would look like as a mixin:

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

然后，您将使用以下命令添加mixin:

You'd then include the mixin later by using:

@include test(red);

这篇关于在Compass/SASS中调用函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！