SCSS - 如何表示

Question

CSS中的嵌套类

.wrapper .widecolumn {
    width: 983px;
}

可以在SCSS中重新播放

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

但是如何表示这个？:

.wrapper.widecolumn {
    width: 983px;
}

Answer 1

wrapper.widecolumn {
    width: 983px;
}

很好(假设这里的包装器是一个示例标签).如果您只关心嵌套,请使用&like:

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

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

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