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);将输出{{ 1}}。

函数gw有效，因为它正确地生成了我的网格css，但是我想定义一个全局函数以便在任何地方使用。因此width: 200px;函数。

Answer 1

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

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

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

然后你可以打电话：

.class{ @include col(6) };

产生：

.class {
  width: 340px; }

Answer 2

函数只能用于返回简单类型（字符串，颜色，数字等）或简单类型列表。它不能用于返回属性/值（例如“color：red”）：执行此操作时所能得到的只是字符串或字符串列表（并且字符串不能以这种方式使用）。与简单地使用mixin 相比，使用字符串列表更有用。

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

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

比较：

@mixin foo() {
    color: red;
}

.foo {
    @include foo;
}

关于你的gw()函数没有任何内在的不可重用的（事实上，它比你梦寐以求的不可能的函数更多可重用）：它返回一个可用于任何属性的数值。实际上，使用它来代替mixin或返回字符串列表的函数是实现所需内容的最有效方式：

.foo {
    width: gw(1);
}

SCSS可重用功能

2 个答案: