sass - SCSS - 如何表示

Question

CSS中的嵌套类

.wrapper .widecolumn {
    width: 983px;
}

可以在 SCSS 中表示为

.wrapper {
    .widecolumn {
        width: 983px;
    }
}

但是如何表示呢？：

.wrapper.widecolumn {
    width: 983px;
}

Answer 1

wrapper.widecolumn {
    width: 983px;
}

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

wrapper {
    &.widecolumn {
        width: 983px;
    }
}

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

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

Answer 2

你也可以

.wrapper {
    
  &__widecolumn {
        width: 983px;
    }
  
}

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

<div class="wrapper__widecolumn">

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

  
</div>