Why i can't nest like this elements in scss?

1

pen: [ http://codepen.io/ustvarno/pen/oLBQzx ]

this doesn't work: 

button {
  .started {
    background-color: green;
  }
}

but this works:
  button {
    }
  .started {
    background-color: green;
  }

How to nest like this and make tidy this?

2

Wrong syntax.

try:

button {
  &.started {
    background-color: green;
  }
}
1 Like
3

works,ty. i was thinking bout that, that it works like normal elements tag, for instance
div {
width: 30px;
height: 30px;
background: green;

  button {
    background-color: yellow;
  }
  
}
4

In that case you’re right, but in your example with the div, the button is INSIDE the div. Like this:

<div><button>Hello</button></div>

But in the example with the button and the class of started, the button HAS the class. so you can do one of this two ways:

 <button class="started">Hello</button>

button.started { 
   background: green; 
}

button {
   &.started { 
      background: green; 
   }
}
1 Like
5

Found this very nice tut: Nesting in Sass and Less | @mdo

Un-nesting with &
The un-nesting example is perhaps the most confusing way to nest CSS.

.child {
.parent & { }
}
When used at the end of a nested selector, the & puts everything to the left of it before the parent selector. So the above example compiles to .parent .child { }. This is confusing in a few ways:

The & puts that selector at the beginning of the top-most parent.
It’s the opposite of how regular nesting works.
It clouds your vision of the compiled CSS.
Rather than go that route, try something like this:

.child { }
.child-modifier { }
The result is a component-based approach with lower specificity and clearer insight into what your compiled CSS will be.