你能帮我解释一下 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

通过这一行，您实际上将两个类应用于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 2

& 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*/
    }
}

Answer 3

你可以说“&”是父级。例如，

这是带有 & 的 SASS。

.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: "";
}

这是没有 & 的 SASS。

   .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");
}

直接附加父选择器有帮助