Sass Learning Introductory Chapter (III)

In this chapter we say "nesting", nested two kinds: one, selector nesting. The second is the nesting of attributes. Typically nested with selectors mostly

One, selector nesting: refers to nesting another selector in one selector to implement inheritance. using the & representation parent element Selector

Li{float:left;   a{         color: #fff;         &:hover{           color: #ddd;}}    }    

As with CSS usage, there's nothing to say.

Two, attribute nesting, refers to some properties have the same beginning word, such as border-width,border-color are beginning with border

. fshadow{  boder:{  style:solid;  Left:{width:4px;color: #333;}}     }

This usage has not been seen, you can try.

Third, @at-root is a new feature of the sass3.3.0 version that jumps out of the selection of nested

did not jump out. parent-1 {  color: #f00;  . Child {    width:100px;  }} A single selector jumps out of the. parent-2 {  color: #f00;  @at-root. Child {    width:200px;  }} Multiple selectors jump out. parent-3 {  background: #f00;  @at-root {    . child1 {      width:300px;    }    . child2 {      width:400px;}}}  

Parsed CSS:

did not jump out. parent-1 {  color: #f00;}. Parent-1. Child {  width:100px;} Individual jumps out of. parent-2 {  color: #f00;}. Child {  width:200px;} Multiple jumps out of. parent-3 {  background: #f00;}. child1 {  width:300px;}. child2 {  width:400px;

　　

Sass Learning Introductory Chapter (III)