我声明了我的@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;
│ ^^^^^^^^^^^^^
╵
有人知道错误可能来自哪里吗?预先感谢
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 的所有功能。