Question

这是使用Sass的DOM。

<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"> - ＆gt;但这不对。为什么这是错的？它如何与.contract-icon类产生影响？
（奖金问题）什么是--invert:before？

Answer 1

& is to reference the parent selector

很容易理解它的作用。您可以说它类似于追加父选择器。或者，这样想吧。

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

.container.success，
.container.success.but-stupid，
.container.successful，
.container > div.error，
.container ~ div.stupid，
.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

您可以说＆＃34; ＆amp; ＆＃34;是上级父母。例如，

这是使用＆amp; 的SASS。

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

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

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

这是没有＆amp; 的SASS。

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

没有＆amp; 的已编译CSS。它将选择子元素

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

直接附加父选择器

有帮助

你能帮我解释Sass代码中的`＆amp;`吗？

3 个答案: