SASS中的嵌套mixin或函数

css CSS

乐米亚

2020-03-23

有些人知道如何在SASS中使用嵌套的mixin或函数?我有这样的事情:

@mixin A(){
    do something....
}

@mixin B($argu){
    @include A();
}

第2839篇《SASS中的嵌套mixin或函数》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
Green古一 2020.03.23

如其他答案所述,您可以在其他mixin中包括mixin。此外,您可以调整混合对象的范围。

.menu {
  user-select: none;

  .theme-dark & {
    color: #fff;
    background-color: #333;

    // Scoped mixin
    // Can only be seen in current block and descendants,
    // i.e., referencing it from outside current block
    // will result in an error.
    @mixin __item() {
      height: 48px;
    }

    &__item {
      @include __item();

      &_type_inverted {
        @include __item();

        color: #333;
        background-color: #fff;
      }
    }
  }
}

将输出:

.menu {
  user-select: none;
}

.theme-dark .menu {
  color: #fff;
  background-color: #333;
}

.theme-dark .menu__item {
  height: 48px;
}

.theme-dark .menu__item_type_inverted {
  height: 48px;
  color: #333;
  background-color: #fff;
}

Scoping mixins means that you can have multiple mixins named the same in different scopes without conflicts arising.

StafanPro 2020.03.23

是的,您已经做对了。您可以在第二个中调用第一个mixin。检查这支笔http://codepen.io/crazyrohila/pen/mvqHo

Mandy 2020.03.23

您可以多嵌套mixin,也可以在mixins中使用占位符。

@mixin a {
  color: red;
}
@mixin b {
  @include a();
  padding: white;
  font-size: 10px;
}
@mixin c{
  @include b;
  padding:5;
}
div {
  @include c();
}

给出了CSS

div {
  color: red;
  padding: white;
  font-size: 10px;
  padding: 5;
}

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android