有没有办法在包含 mixin 之后编写样式？答案

【问题标题】：Is there a way to write style that will always come after mixins are included?有没有办法在包含 mixin 之后编写样式？
【发布时间】：2019-12-22 23:30:47
【问题描述】：

我遇到了 SCSS mixins 的问题，我必须重复相同的代码才能完成工作。我有以下 SCSS 代码：

@mixin column($count, $size) { // Can not make any change in this code.
  width: getWidth($count, $size);
  margin-left: 3%;
  margin-right: 3%;
}

@mixin desktop {
  @media screen and (min-width: 1024px) {
    @content;
  }
}

@mixin tablet {
  @media screen and (min-width: 768px) and (max-width: 1023px) {
    @content;
  }
}

@function getWidth($count, $size) {
  @return 50; // For example purpose only.
}

.c {
  @include desktop {
    @include column(10, large);
  }

  @include desktop {
    @include column(11, large);
  }

  margin: 0 auto;
}

编译成：

.c {
  margin: 0 auto;
}

@media screen and (min-width: 1024px) {
  .c {
    width: 50;
    margin-left: 3%;
    margin-right: 3%;
  }
}

@media screen and (min-width: 1024px) {
  .c {
    width: 50;
    margin-left: 3%;
    margin-right: 3%;
  }
}

这里的问题是 margin 被 mixins 覆盖了。或者我必须重复相同的代码（重复代码），如下所示：

.c {
  @include desktop {
    @include column(10, large);
    margin: 0 auto; // Duplicate
  }

  @include desktop {
    @include column(11, large);
    margin: 0 auto; // Duplicate
  }

  margin: 0 auto;
}

得到：

.c {
    margin: 0 auto;
  }

  @media screen and (min-width: 1024px) {
    .c {
      width: 50;
      margin-left: 3%;
      margin-right: 3%;
      margin: 0 auto;
    }
  }

  @media screen and (min-width: 1024px) {
    .c {
      width: 50;
      margin-left: 3%;
      margin-right: 3%;
      margin: 0 auto;
    }
  }

有没有更好的方法来删除这个重复的代码，这样我只需要编写一次代码？

【问题讨论】：

标签： sass scss-mixins

【解决方案1】：

试试这个，看看@media 查询之后是否让你开心。

.c {
  @include desktop {
    @include column(10, large);
  }
  @include desktop {
    @include column(11, large);
  }
  & {
    margin: 0 auto;
  }
}

【讨论】：

是的，它有效。稍作修改。因此，无需重复类名。 .c { @include desktop { @include column(10, large); } @include desktop { @include column(11, large); } & { margin: 0 auto; } }
很酷的语法，我相应地更新了答案，如果它以某种方式帮助您更轻松地找到答案，请考虑给它一个赞。