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

问题描述 投票:0回答:1

我声明了我的@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;
  │     ^^^^^^^^^^^^^
  ╵

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

sass mixins
1个回答
0
投票

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 的所有功能。

© www.soinside.com 2019 - 2024. All rights reserved.