Nested styles

We can nest selector to put related style definition into groups.

An Scss example of nested selectors.

 1.page {
 2  p {
 3    margin: 1em 0;
 4  }
 5  .row {
 6    width: 100%;
 7  }
 8  &>div {
 9    padding: 10px;
10  }
11}

This scss will compiled into the following css.

 1.page p {
 2  margin: 1em 0;
 3}
 4.page .row {
 5  width: 100%;
 6}
 7.page>div {
 8  padding: 10px;
 9}

The Scss edition of our minimal grid system.

 1.row {
 2  width: 100%;
 3  max-width: 600px;
 4  margin: 0 auto;
 5  padding-top: 10px;
 6  padding-bottom: 10px;
 7
 8  @media screen and (min-width: 500px) {
 9    overflow: auto;
10  }
11
12  .row {
13    width: auto;
14    max-width: none;
15    margin: 0 -10px;
16  }
17}
18
19.col {
20  padding: 0 10px;
21  width: 100%;
22
23  @media screen and (min-width: 500px) {
24    float:left;
25  }
26}
27
28
29/* Navigation */
30nav li {
31  width: 100%;
32  padding: 5px;
33
34  @media screen and (min-width: 500px) {
35    width: 33.33%;
36    float: left;
37  }
38
39  a {
40    background: #efefef;
41    display: block;
42    padding: 15px 0px;
43    text-align: center;
44  }
45}
46
47@media screen and (min-width: 500px) {
48  .one {
49    width: 25%;
50  }
51  .two {
52    width: 50%;
53  }
54  .three {
55    width: 75%;
56  }
57  .four {
58  }
59}

The compiled CSS from the Scss.

 1.row {
 2  width: 100%;
 3  max-width: 600px;
 4  margin: 0 auto;
 5  padding-top: 10px;
 6  padding-bottom: 10px; }
 7  @media screen and (min-width: 500px) {
 8    .row {
 9      overflow: auto; } }
10  .row .row {
11    width: auto;
12    max-width: none;
13    margin: 0 -10px; }
14
15.col {
16  padding: 0 10px;
17  width: 100%; }
18  @media screen and (min-width: 500px) {
19    .col {
20      float: left; } }
21
22/* Navigation */
23nav li {
24  width: 100%;
25  padding: 5px; }
26  @media screen and (min-width: 500px) {
27    nav li {
28      width: 33.33%;
29      float: left; } }
30  nav li a {
31    background: #efefef;
32    display: block;
33    padding: 15px 0px;
34    text-align: center; }
35
36@media screen and (min-width: 500px) {
37  .one {
38    width: 25%; }
39
40  .two {
41    width: 50%; }
42
43  .three {
44    width: 75%; } }

What’s next? We’re going to take a look at “Scss variable”.

◀ Preprocessor options Scss variable ▶

makzan.

Nested styles

Makzan | Mobile web design | Table of Content