使用 SASS 连接嵌套类 [英] Concatenating nested classes using SASS

问题描述

我正在尝试使用 SASS 的嵌套功能来连接两个类，但不知道该怎么做.

这是 HTML:

<div class="b"><div class="c date">某个日期</div>

</节>

这是我目前的 SASS:

.a .c显示:内联块.日期宽度:50px

它创建了以下 CSS:

.a .c {显示:内联块；}.a .c .日期{宽度:50px；}

但这行不通.浏览器希望date"和string-long"嵌套在c"类下，而不是它们都存在于同一个 HTML 标签上.

我需要的是这个(.c 和 .date 之间没有空格 => .c.date):

.a .c {显示:内联块；}.a .c.日期{宽度:50px；}

我该怎么做?

解决方案

&

您可以使用 & 运算符.试试:

.a .c显示:内联块&.日期宽度:50px

&符号是父选择器的占位符.如果在嵌套选择器中没有在它后面放置一个空格，它将输出一个连接的选择器(正是你想要的).

演示

---

^{注意:在更深的嵌套选择器中&代表嵌套选择器的整个路径，而不仅仅是直接父级.}

I am trying to use the nesting feature of SASS to concatenate two classes, but can't figure out how to do it.

This is the HTML:

<section class="a">
    <div class="b">
        <div class="c date">some date</div>
    </div>
</section>

Here is my current SASS:

.a .c
    display: inline-block

    .date
        width: 50px

It creates the following CSS:

.a .c {
    display: inline-block;
}
.a .c .date {
    width: 50px;
}

But this doesn't work. The browser expects the "date" and "string-long" to be nested under the "c" class rather than them being both existent on the same HTML tag.

What I need is this (no space between .c and .date => .c.date):

.a .c {
    display: inline-block;
}
.a .c.date {
    width: 50px;
}

How can I do this?

解决方案

&

You can achieve this with the ampersand operator. Try:

.a .c
  display: inline-block

  &.date
    width: 50px

The ampersand is a placeholder for parent selectors. And if you don't place a space after it in a nested selector it will output a concatenated selector (just what you want).

DEMO

---

^{Note: in deeper nested selectors & stands for the whole path of nested selectors not just for the immediate parent.}

这篇关于使用 SASS 连接嵌套类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！