Sass中&符号解析及相关DOM、语法疑问解答

嘿，这几个问题都是刚开始用Sass时很容易踩的坑，我来逐一给你拆解清楚：

1. 为什么你想的父子DOM结构是错误的？ #

你之前以为Sass里的嵌套会生成父子元素选择器，但实际上Sass中的&是当前选择器的完全引用，不是用来生成子选择器的。

看你的Sass代码：

.contract-icon {
  &.ic-rise_fall {
    &:before { ... }
  }
}

这段代码编译后的CSS是：

.contract-icon.ic-rise_fall:before {
  content: url('../images/trading_app/contracts/rise_fall.svg');
}

它对应的DOM是同一个元素同时拥有两个类：<i class="contract-icon ic-rise_fall" />，也就是你一开始写的那个DOM结构才是正确的。

如果要生成你想的父子DOM结构（<div class="contract-icon"><div class="ic-rise_fall"></div></div>），Sass里不需要用&，直接写子选择器就行：

.contract-icon {
  .ic-rise_fall { /* 这里没有&，表示子元素 */
    &:before { ... }
  }
}

编译后是：

.contract-icon .ic-rise_fall:before { ... }

2. 同元素多类和父子元素结构的区别 #

• 样式作用对象不同：同元素多类的样式是直接作用在那个同时拥有两个类的元素上（比如你的<i>标签）；父子结构的样式是作用在子元素上，父元素和子元素的样式是相互独立的。
• CSS权重不同：同元素多类的选择器权重是两个类选择器的叠加（权重值：0,0,2,0），而父子选择器是父类+子类的权重（同样是0,0,2,0，但作用对象不同）。
• DOM结构复杂度不同：同元素多类不需要额外嵌套DOM，更简洁；父子结构需要多一层元素，适合需要单独控制子元素布局的场景。

在你的场景里，图标是通过伪元素:before来实现的，伪元素必须依附在某个真实元素上，所以直接把类都加在同一个<i>标签上是最合理的写法。

3. &--invert:before的具体含义 #

这是结合了Sass嵌套和BEM命名规范的写法：

• &在这里代表的是上层的选择器.contract-icon.ic-rise_fall
• --invert是BEM里的「修饰符（Modifier）」，用来表示元素的一种特殊状态（这里是“反转”状态）

所以这段Sass代码：

.contract-icon {
  &.ic-rise_fall {
    &--invert:before {
      content: url('../images/trading_app/contracts/invert/rise_fall.svg');
    }
  }
}

编译后的CSS是：

.contract-icon.ic-rise_fall--invert:before {
  content: url('../images/trading_app/contracts/invert/rise_fall.svg');
}

对应的DOM应该是<i class="contract-icon ic-rise_fall--invert" />，当元素有这个类时，伪元素就会加载反转版本的SVG图标。

内容的提问来源于stack exchange，提问作者merry-go-round