错误：声明只能在样式规则中使用

Question

我声明了我的@mixin，它没有给我带来任何问题，突然它开始给出这个错误：

@mixin flexbox ($justify-content: center, $align-items: center, $flex-direction: column, $flex-wrap:wrap) {
    display: flex;
    justify-content: $justify-content;
    align-items: $align-items;
    flex-direction: $flex-direction;
    flex-wrap: $flex-wrap;
}

Compilation Error
Error: Declarations may only be used within style rules.
  ╷
2 │     display: flex;
  │     ^^^^^^^^^^^^^
  ╵

有人知道错误可能来自哪里吗？预先感谢

Answer 1

SCSS mixins 使用 2 个 at 规则工作。

@mixin

和

@include

。

使用像

这样的mixin

@mixin flexbox ($justify-content: center, $align-items: center, $flex-direction: column, $flex-wrap:wrap) {
    display: flex;
    justify-content: $justify-content;
    align-items: $align-items;
    flex-direction: $flex-direction;
    flex-wrap: $flex-wrap;
}

您可以像这样在 CSS 声明块（或样式规则）中调用 include at 规则。 这就是错误所指的内容。

// <-- Can't be used here, because it would output invalid CSS.

.my-flex-element {
    @include flexbox;
    // other rules
    background: #333;
}

哪个输出

.my-flex-element {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  background: #333;
}

Sass 有一个很棒的游乐场，可以立即在一个屏幕上查看输出。 它非常适合探索 Sass 的所有功能。