SCSS - how to represent

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;
}

score 5 · Accepted Answer · answered Aug 17 '12 at 14:20

5

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;
    }
}

answered Aug 17 '12 at 14:20

moopet

6,014
1
29
36

The last one is optimal for huge stylesheets if you want to lose the overview because it completely messes up your nesting... – Christoph Aug 17 '12 at 14:29
I use it sometimes with modernizr's HTML-tag classes, to allow options for redneck browsers. – moopet Aug 17 '12 at 14:36
Sorry, I forgot the point before wrapper, so ".wrapper" – Paul Aug 17 '12 at 16:24

score -3 · Answer 2 · answered Oct 01 '15 at 08:50

-3

You can do Also

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

When you will do that then you can simply use This just like that :

<div class="wrapper__widecolumn">

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

  
</div>

answered Oct 01 '15 at 08:50

Piotr Sikora

145
9

That's not what's being asked here at all. – cimmanon Oct 01 '15 at 10:54

SCSS - how to represent

2 Answers2