SCSS可重用函数 [英] SCSS reusable function

问题描述

我的sass文件中有一个错误，我不知道它不工作...

I have an error in my sass file, I've got no idea what it's not working...

这是我从调用 .class {col（6）;

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

这里是用来创建函数的函数和变量（对不起，如果有点混乱）：

Here's the function and variables used to create the function (sorry if it's a bit confusing):

$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; 。

All im trying to do, is re use the gw() function, so that I can use it in css to output the number of columns as a width css property, ie grid(4); would output width: 200px;.

函数gw工作，因为它正确生成我的网格css，想定义一个全局函数来使用无处不在。因此， col（）函数。

the function gw works because it generates my grid css properly, however I want to define a global function to use everywhere. Hence the col() function.

推荐答案

函数，但不返回除其正文以外的任何东西，这可以是完全SCSS。

A mixin is like a function, but does not return anything other than its body, which can be full blown SCSS.

因此，您可以通过 col a mixin ，如下所示：

So you can fix this by making col a mixin, like so:

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

然后您可以调用：

.class{ @include col(6) };

其中产生：

.class {
  width: 340px; }

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