Sass 有没有一种方法可以在包含mixin之后写出风格？

我面临着SCSS混合的问题，因此我必须重复相同的代码才能完成工作。我有以下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%;
  }
}

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

.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;
    }
  }

---

是否有更好的方法删除此重复代码，以便我只需编写一次代码？

尝试此方法，看看

@media

查询之后是否让您满意

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

---

是的，它起作用了。稍微修改一下。因此，不需要重复classname<代码> > C{@包含桌面{@包含列（10，大）；}@包含桌面{@包含列（11，大）；}和{空白：0自动；} < /COD>酷语法，我相应地更新了答案，如果它能帮助您找到答案，请考虑给它一个赞成票。