css - 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; }