Question

The nested class in CSS

.wrapper .widecolumn {
    width: 983px;
}

could be repersented in SCSS as

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

but how to represent this?:

.wrapper.widecolumn {
    width: 983px;
}

Answer 1

wrapper.widecolumn {
    width: 983px;
}

is fine (assuming here that wrapper is an example tag). If you’re just concerned about nesting, use & like so:

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

The & represents the parent object, so you can also do clever things like

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