如何使用 @media 和 sass 在选择器中包含和排除属性答案

【问题标题】：How to include and exclude properties in selector using @media with sass如何使用 @media 和 sass 在选择器中包含和排除属性
【发布时间】：2017-03-23 10:41:28
【问题描述】：

我有两个 SCSS：横向和纵向。我的肖像 SCSS 的一部分：

.img-logo__tree_hidden {
  display: none;
}

还有我的风景 SCSS 的一部分：

.img-logo__tree_hidden {
  visibility: hidden;
}

我尝试将这些 SCSS 重构为一个 SCSS，结果如下：

.img-logo__tree_hidden {
  display: none;
  @media all and (orientation: landscape) {
    visibility: hidden;
  }
}

但生成的 CSS 是：

.img-logo__tree_hidden {
  display: none;
  visibility: hidden;
}

所以，我需要做些什么才能使用@media 将这个 CSS 设置为横向：

.img-logo__tree_hidden {
  visibility: hidden;
}

【问题讨论】：

我在 sassmeister.com 上尝试过您的代码，但输出与您在此处给出的不同。符合预期。
我也是，和 sassmeister.com 的 @Harry 一样，它就像一个魅力
@Harry 是对的，我想真正的问题是你仍然应用了none，因为它是一般样式，所以即使媒体的条件为真，元素仍然是none跨度>

标签： css sass media-queries

【解决方案1】：

我已经赢得了这场麻烦。在萨斯迈斯特一切都很好。但在我的 SCSS 中不行。我刚刚添加了另一个@media：

@media all and (orientation:portrait) {
  .img-logo__tree_hidden {
    display: none;
  }
}

这是工作。

【讨论】：