SCSS - 如何表示[重复]

Posted 2023-03-06

【中文标题】SCSS - 如何表示[重复]

【英文标题】：SCSS - how to represent [duplicate]

【发布时间】：2012-08-13 20:30:01

【问题描述】：

CSS 中的嵌套类

.wrapper .widecolumn 
    width: 983px;

可以在 SCSS 中表示为

.wrapper 
    .widecolumn 
        width: 983px;
    

但是如何表示呢？：

.wrapper.widecolumn 
    width: 983px;

【参考方案1】：

wrapper.widecolumn 
    width: 983px;

很好（假设 wrapper 是一个示例标记）。如果您只关心嵌套，请使用 & 像这样：

wrapper 
    &.widecolumn 
        width: 983px;
    

& 代表父对象，所以你也可以做一些聪明的事情，比如

wrapper 
    &.widecolumn 
        width: 983px;
    
    &:hover 
        color: red;
    
    body.mycoolclass & 
        font-weight: bold;
    

【讨论】：

如果你想失去概览，最后一个最适合大型样式表，因为它完全打乱了你的嵌套......

我有时将它与 modernizr 的 html-tag 类一起使用，以允许乡巴佬浏览器的选项。

对不起，我忘记了wrapper之前的意思，所以“.wrapper”

【参考方案2】：

你也可以这样做

.wrapper 
    
  &__widecolumn 
        width: 983px;
    
  

当你这样做时，你可以像这样简单地使用 This ：

<div class="wrapper__widecolumn">

  <!-- This Column will be 983px -->

  
</div>

【讨论】：

这根本不是这里要问的。