SCSS 可重用函数

Question

我的 sass 文件中有一个错误，我不知道它有什么问题...

这是我拨打.class{ col(6);收到的消息

error scss/components.scss (Line 18: Invalid CSS after "...gin:7px 0; col": expected "{", was "(6);")

这是用于创建函数的函数和变量（如果有点混乱，请见谅）：

$columnWidth:40;
$numberOfColumns:16;
$gutterWidth: 20;

$fullWidth:($columnWidth * $numberOfColumns) +  ($gutterWidth * $numberOfColumns); 

@function perc($target) {
  @return (($target / $fullWidth) * 100%);
}

@function gw($n, $fluid: false) {
  $calculatedValue: ($n * $columnWidth + ($n - 1) * $gutterWidth);
  @if $fluid == false {  
    @return $calculatedValue + px;  
  } @else { 
    @return perc($calculatedValue);
  }
}

@function col($n, $fluid: false){  
  @return unquote("width: gw($n, $fluid);");
}

我要做的就是重新使用gw()函数，这样我就可以在css中使用它来输出列数作为宽度css属性，即grid(4);将输出width: 200px;。

函数 gw 可以正常工作，因为它可以正确生成我的网格 css，但是我想定义一个全局函数以在任何地方使用。因此col() 函数。

Answer 1

mixin 就像一个函数，但除了它的主体之外不返回任何东西，它可以是完整的 SCSS。

因此您可以通过将col 设置为mixin 来解决此问题，如下所示：

@mixin col($n, $fluid: false){  
  width: gw($n, $fluid);
}

然后你可以调用：

.class{ @include col(6) };

产生：

.class {
  width: 340px; }

Answer 2

函数只能用于返回简单类型（字符串、颜色、数字等）或简单类型列表。它不能用于返回属性/值（例如“颜色：红色”）：当您这样做时，您所能得到的只是一个字符串或字符串列表（并且不能以这种方式使用字符串）。与简单地使用mixin相比，处理字符串列表对你来说更有用。

@function foo() {
    @return color red;
}

.foo {
    $kv: foo();
    #{nth($foo, 1)}: #{nth($foo, 2)}
}

比较：

@mixin foo() {
    color: red;
}

.foo {
    @include foo;
}

您的 gw() 函数本质上不可重用（事实上，它比您梦寐以求的不可能的功能更多可重用）：它返回可用于 any 属性的数值。事实上，使用它代替 mixin 或返回字符串列表的函数是处理您要查找的内容的最有效方法：

.foo {
    width: gw(1);
}