javascript - 你能帮我用 Sass 代码解释 `&` 吗？

Question

这是 DOM 应用 Sass。

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

这是 Sass 文件。

.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

& is to reference the parent selector .

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

假设您要将多种样式应用到 .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*/
    }
}