SCSS 中的 Mixin（一个类在另一个类中的属性）

Question

在 LESS 中我可以写这样的东西：

.foo {
    color: red;
}

.boo {
    .foo();
    background: blue;
}

将

.foo

类的属性“包含”到

.boo

类中。

在 SCSS 中获得类似行为的最简单、最干净的方法是什么？

Answer 1

这样尝试怎么样，

mixins.scss

@mixin flex($x: center, $y: center) {
    display: flex;
    align-items: $x;
    justify-content: $y;
}

自定义.scss

.classname {
    @include flex(flex-start, space-between);
    color: red;
}

使用@include

Answer 2

您可以使用占位符，如下所示：

%foo {
  color: red;
}

.background {
  @extend %foo;
  background: blue;
}