你能帮我解释 Sass 代码中的"&"吗？

Question

这是DOM应用Sass。

<i className={`contract-icon ic-${this.props.value}`} /> 

这是萨斯文件。

.contract-icon {
&.ic-rise_fall {
&:before {
content: url('../images/trading_app/contracts/rise_fall.svg');
}
&--invert:before { # What's this?
content: url('../images/trading_app/contracts/invert/rise_fall.svg');
}
}
.other-class {
padding-right: 8px;
}
...

根据我的研究，

• 如果当前元素应用了随附的类，则&与此选择器组合/连接。

  • (我的猜测(所以我认为我们可以这样构建 DOM：<div class="contract-icon> <div class="ic-rise_fall">-> 但这是不对的。为什么错了？它与.contract-icon课有何不同？

• (奖金问题(什么是--invert:before？

Answer 1

&是引用父选择器。

它的作用真的很容易理解。你可以说这就像附加父选择器一样。或者，这样想。

因此，假设您要将多种样式应用于.container，其标准css是：

1. .container.success，
2. .container.success.but-stupid，
3. .container.successful，
4. .container > div.error，
5. .container ~ div.stupid，
6. .container-----_happy-sass

在 SASS 中，您可以像这样做，

.container { /* this is 1 */
&.success { 
&.but-stupid { /* this is 2 */ }
&ful { /* this is 3 */  }
}
& > div.error { /* this is 4 */ }
& ~ div.stupid { /* this is 5 */ }
&-----_happy-sass { /* this is 6 */ }
}

或者，在上述情况下，

.contract-icon {
&.ic-rise_fall {  /* EQUALS TO .contract-icon.ic-rise_fall */
&:before { /* EQUALS TO .contract-icon.ic-rise_fall:before; */
/*declarations*/
}
&--invert:before { /* EQUALS TO .contract-icon.ic-rise_fall--invert */
/*declarations*/
}
}
.other-class { /* EQUALS TO .contract-icon .other-class */
/*declarations*/
}
}

Answer 2

使用此行，您实际上是将两个类应用于i，它们是contract-icon和ic-{something}(在示例中是ic-rise_fall(。

正如您所说&用于组合类名。方法：-

&.ic-rise_fall {
&--invert:before { # What's this?
content: url('../images/trading_app/contracts/invert/rise_fall.svg');
}
}

这将转换为

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

在 CSS 中。

所以基本上，代码

.contract-icon {
&.ic-rise_fall {
&:before {
content: url('../images/trading_app/contracts/rise_fall.svg');
}
&--invert:before { # What's this?
content: url('../images/trading_app/contracts/invert/rise_fall.svg');
}
}
.other-class {
padding-right: 8px;
}
}

将转换为

.contract-icon.ic-rise_fall:before {
content: url('../images/trading_app/contracts/rise_fall.svg');
}
.contract-icon.ic-rise_fall--invert:before {
content: url('../images/trading_app/contracts/invert/rise_fall.svg');
}
.contract-icon .other-class {
padding-right: 8px;
}

喜欢这个。

此ic-{something}作为props从父级传递，因此，它可以是ic-rise_fall的，也可以是ic-rise_fall--invert的。所以我们只是在这里处理使用 SASS 的可能性。

<span class='contract-icon ic-rise_fall'>
<i class='other-class'></i>
</span>

将此视为应用other-class和ic-rise_fall的情况

Answer 3

你可以说">&"是上父级。 例如，

这是带有&.

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

这是&的编译 CSS。它将选择相同级别的选择器

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

这是没有&.

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

编译的 CSS 没有&.它将选择子元素

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

它有助于直接附加父选择器