仅使用SCSS能否在某元素存在时给另一独立元素设置CSS样式规则？

可以实现，但仅能覆盖特定DOM结构场景。SCSS本质是CSS预处理器，编译后最终输出的还是普通CSS，本身没有额外的DOM查询能力，所有匹配逻辑都遵循CSS的选择器规则：只能匹配DOM树中存在前置关联的元素，无法向上查询父元素、也无法查询位置在前的兄弟元素。

1. 特定元素是待隐藏元素的父/祖先元素 #

只要特定元素存在，它的所有后代节点里的待隐藏元素都会被隐藏，写法如下：

.thisElementExist {
  .anotherElement {
    display: none !important;
  }
}

2. 特定元素是待隐藏元素所属节点的前置兄弟元素 #

如果待隐藏元素在特定元素的同级后续节点（相邻或者间隔多个节点都可以）里，可以用相邻兄弟选择器+或者通用兄弟选择器~实现：

// 匹配和.thisElementExist相邻的下一个.elementExists节点下的.anotherElement
.thisElementExist + .elementExists {
  .anotherElement {
    display: none !important;
  }
}

// 匹配所有在.thisElementExist之后的同级.elementExists节点下的.anotherElement
.thisElementExist ~ .elementExists {
  .anotherElement {
    display: none !important;
  }
}

如果符合以下任意一种情况，纯SCSS/CSS无法满足需求，需要用JavaScript实现：

• 特定元素在待隐藏元素的DOM层级之后（比如是待隐藏元素的子元素、或者是位置更靠后的兄弟元素）
• 特定元素和待隐藏元素不属于同一个DOM分支，没有共同的祖先节点可以用来做前置匹配

内容的提问来源于stack exchange，提问作者CodingLittle