SCSS - 嵌套

嵌套{{}}

嵌套就像下面的样子，先写自身的样式，再嵌套子元素。

嵌套不要超过三层，否则产生难以理解的代码。

 

#a {
  float: right;

  .nav {
    float: left;
    color: red;

    ul {
      width: 400px;

      li {
        font-size: 30px;

        a {
          color: blue;
        }
        &.active {
          font-weight: bold;
        }
      }
    }
  }
}

注意&符号，它叫父元素占位符，如果没有父元素占位符，解析之后会是：

 

#a .nav ul li .active {
   font-weight: bold;
}

#a .nav ul li .active指代什么元素？指代li下面的所有元素中class是active的元素，这根本不是我们的本意，我们的本意是ul下面所有li中class是active的li。所以不能这么写。现在，如果加上&符号，解析之后会是：

 

#a .nav ul li.active {
   font-weight: bold;
}

这样就符合要求了。所以，&符号指代父元素，当.active并不是li的子元素，而是li自身的一个css状态时，你应该使用&符号。凡是必须将两个选择符连写在一起的场合，包括ele.class、ele:active等等，都适用&。

当一个元素的样式在另一个容器中有其他指定的样式时，可以使用嵌套选择器让他们保持在同一个地方。.no-opacity &相当于.no-opacity .foo。

 

.foo {
  // …

  .no-opacity & {
    display: none;
  }
}

进阶：群组选择器的写法

如果父元素是.container，子元素有h1、h2、h3，他们行高都是1.5em，怎么写？有两种写法：

 

.container h1, .container h2, .container h3 {
  line-height: 1.5em;
}

 

.container {
  h1, h2, h3 {
    line-height: 1.5em;
  }
}

显然第一种重复了N次.container，是一种愚蠢的写法，下面的写法才是科学的。

总之，任何一级选择器都可以写成组合选择器。

进阶：子组合选择器和同层组合选择器： >、 +和~

子组合选择器的意思是，有一个#id>li列表，如果你明确知道不需要给#id设置任何规则，只想给li设置规则，那么，你就没必要写成下面的样子：

 

#id {
  li {
    ......
  }
}

只需要下面这样即可。说白了>并不是SCSS，而是原生css的写法。

 

#id > li {
  ......
}

同样道理，后邻选择符（E+F）和后邻们选择符（E~F）也可以直接用。不过，SASS还有更灵活的用法：

1、把F写到大括号里面，+和~也放到里面。请记住，不要以为大括号里面的元素一定是子元素，还可能是后邻（们）元素。
2、把F写到大括号里面，但是+和~放到外面。下面的dl >就是把>放到了外面，可以少敲几个>。
3、如果都在大括号外面，那就是常规CSS的写法，不多说。

 

article {
    ~ article {
        border-top: 1px dashed #ccc
    }
    > section {
        background: #eee
    }
    dl > {
        dt {
            color: #333
        }
        dd {
            color: #555
        }
    }
    nav + & {
        margin-top: 0
    }
}

进阶：属性名也可以拆开，用大括号嵌套！

这个就有点牛逼了，凡是带中划线的属性名，都可以拆开，然后用大括号嵌套，让你懒到家。

写法是，把border-style的前半部分写在块外，后面加个冒号，然后把后半部分写到大括号里面即可。将来解析的时候，解析器会自动拼装。

注意绝对不可以忘了加冒号，如果忘了加冒号，就成了最简单的嵌套，就全错了。

 

nav {
    border: {
        style: solid;
        width: 1px;
        color: #ccc;
    }
}

更复杂可以这样，外面是一个正常的简写属性和它的值，后面跟个大括号，大括号里面可以声明几个细分属性的后半名称和值：

 

nav {
    border: 1px solid #ccc {
        left: 0px;
        right: 0px;
    }
}

解析之后是：

 

nav {
    border: 1px solid #ccc;
    border-left: 0px;
    border-right: 0px;
}