0

我的 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()功能。

4

2 回答 2

2

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

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

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

然后你可以调用：

.class{ @include col(6) };

产生：

.class {
  width: 340px; }
于 2013-06-27T07:44:28.327 回答
-1

函数只能用于返回简单类型（字符串、颜色、数字等）或简单类型列表。它不能用于返回属性/值（例如“颜色：红色”）：当你这样做时，你所能得到的只是一个字符串或一个字符串列表（并且字符串不能以这种方式使用）。使用字符串列表比简单地使用 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);
}
于 2013-06-27T11:17:30.563 回答