Sass .scss:嵌套和多个类?


332

我正在为当前项目使用Sass(.scss)。

以下示例:

的HTML

<div class="container desc">
    <div class="hello">
        Hello World
    </div>
</div>

SCSS

.container {
    background:red;
    color:white;

    .hello {
        padding-left:50px;
    }
}

这很好。

使用嵌套样式时可以处理多个类吗?

在上面的示例中,我正在谈论这一点:

的CSS

.container.desc {
    background:blue;
}

在这种情况下,所有div.container通常会red,但div.container.desc会是蓝色的。

我该如何将它container与Sass 嵌套在一起?


1
您应该使用双重类别选择器。这个问题是Sass中嵌套选项的完美示例。您可以在此处阅读有关此内容的全部信息kolosek.com/nesting-in-less-and-sass
Nesha Zoric

Answers:


570

您可以使用父选择器引用 &,编译后它将被父选择器替换:

例如:

.container {
    background:red;
    &.desc{
       background:blue;
    }
}

/* compiles to: */
.container {
    background: red;
}
.container.desc {
    background: blue;
}

&会彻底解决,因此,如果你的父母选择嵌套本身,嵌套将取代之前解决&

这种表示法最常用于编写伪元素和-classs

.element{
    &:hover{ ... }
    &:nth-child(1){ ... }
}

但是,您&几乎可以将*放置在您喜欢的任何位置*,因此也可以执行以下操作:

.container {
    background:red;
    #id &{
       background:blue;
    }
}

/* compiles to: */
.container {
    background: red;
}
#id .container {
    background: blue;
}

但是请注意,这会以某种方式破坏您的嵌套结构,因此可能会增加在样式表中查找特定规则的工作。

*:不允许在空格前使用除空格以外的其他字符&。因此,您不能将selector+ 直接串联&- #id&会引发错误。


12
附带一提,&使用伪元素和伪类时通常使用。例如:&:hover
2014年

1
@crush为完整起见,我将此添加到了答案中。感谢您的评论。
Christoph

1
谢谢。我以为我很蠢,因为基本指南中没有提到它!:BTW的文档已移至网址sass-lang.com/documentation/...
scipilot

1
如果&在一行的末尾使用if ,它将把该行放在所有其他级别的其余类的开头。您可以通过执行&.descunder 来组合元素.container,这将在其后附加.desc,从而导致.container.desc
Kate Miller

scss-lint建议使用“&:: hover”(双冒号)
Marcel Lange,

18

如果是这样,我认为您需要使用更好的方法来创建类名或类名约定。例如,就像您说的那样,您希望.container班级根据特定的用法或外观具有不同的颜色。你可以这样做:

SCSS

.container {
  background: red;

  &--desc {
    background: blue;
  }

  // or you can do a more specific name
  &--blue {
    background: blue;
  }

  &--red {
    background: red;
  }
}

的CSS

.container {
  background: red;
}

.container--desc {
  background: blue;
}

.container--blue {
  background: blue;
}

.container--red {
  background: red;
}

上面的代码基于类命名约定中的BEM方法论。您可以检查以下链接:BEM —块元素修改器方法


请注意,这听起来不错,但应不惜一切代价避免。将来,当您尝试在您的项目中搜索.container--desc并最终没有结果时,您将感谢我。
Stavm

2

克里斯托夫的答案是完美的。但是有时您可能想上一堂以上的课。在这种情况下,您可以尝试使用@at-root和的#{}CSS功能,使两个根类可以使用并排放置&

这不起作用(由于nothing before &规则):

container {
    background:red;
    color:white;
    
    .desc& {
      background: blue;
    }

    .hello {
        padding-left:50px;
    }
}

但这将(使用@at-root plus #{&}):

container {
    background:red;
    color:white;
    
    @at-root .desc#{&} {
      background: blue;
    }

    .hello {
        padding-left:50px;
    }
}

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.