CSS / SCSS：有没有办法将属性“重置”到前一个类中的该属性？

Question

在framework.scss上我有：

.row {
  margin: $margin-variable;
}

在page.scss上我有

.row {
  margin: auto;
}

我有一个新的scss文件，mobile-page.scss，用媒体查询覆盖page.scss。我希望移动页面'.row的边距可以继承$margin-variable。

有没有办法可以告诉margin忽略page.scss上设置的值并继承frame.scss上的值？

Answer 1

这两种方法都应该在你的page.scss而不是framework.scss中，因为我认为框架文件是你的默认框架类。 page.scss也必须在framework.scss之后加载才能成功覆盖框架的类：

1. 覆盖内部的类以在某个断点处覆盖它（可以是max，min或max和min的组合）：
＆＃13;
＆＃13;
.row {
  margin: 0 auto;
  @media screen and (max-width: $your-margin-variable) {
    margin: $something-else;
  }
}
＆＃13;
＆＃13;
＆＃13;
1. 使用特异性将您的媒体查询放在所有CSS的末尾的行类中，以便它覆盖上面的那个：
＆＃13;
＆＃13;
@media screen and (max-width: $your-margin-variable) {
  .row {
     margin: $something-else;
  }
}
＆＃13;
＆＃13;
＆＃13;

Answer 2

在mobile.scss上使用

.row{
     margin: $margin-variable;
}

不要忘记在框架样式表之后添加此样式表。