scss 新手，“规则为空”？

【问题标题】：New to scss, "rule is empty"?scss 新手，“规则为空”？
【发布时间】：2014-04-22 19:16:51
【问题描述】：

超级简单

$span1Width:  10;
$marginWidth:  5;


@mixin span-width($spannr) {
      width: $span1Width   * $spannr *1%;
      *width: $marginWidth* $spannr -1 *1%;
}


div{
  @use span-width(10);
}

使用 codepen 分析 css 时导致“空规则”。

【问题讨论】：

你试过@include而不是@use吗？
快速检查页面源代码应该会告诉你，那里有div{@use span-width(10);} - 所以你的代码没有发生任何事情。这是因为您使用了未知关键字，就像 Fabrizio 已经解释的那样。

标签： sass

【解决方案1】：

如果您查看 sass 文档中有关如何使用 mixins 的示例，您会看到：

$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}

.colors {
  @include colors { color: $color; }
}

所以你应该使用 @include 和 { } 来代替。喜欢（在本例中使用默认 5）：

$span1Width:  10;
$marginWidth:  5;


@mixin span-width($spannr: 5) {
      width: $span1Width   * $spannr *1%;
      *width: $marginWidth* $spannr -1 *1%;
}


div{
  @include span-width{ spannr: 10};
}

这应该会给你正确的结果

【讨论】：

我认为运算符和数字之间必须有空格。例如。 - 1 * 1% 不是 -1 *1%