sass学习4——嵌套css规则

css中重复选择器很恼人，需要写一长串指向页面中同一块的样式时要一遍一遍的写同一个样式名，如

.content article h1{}
.content article p{}
.content aside{}

用sass的写法就简单多了,一样可以生成如上代码结构。

.content {
    article {
        p {}
    }
    aside {}
}

多数情况下这种嵌套式没问题的，但是有些如你想在嵌套选择权里应用类似：hover伪类，这种情况需要用到父选择器的标识符 &

错误的写法：

.article a{
  color:blue;
 :hover{color:red}
}

生成代码结构为下图，此时导致样式不工作。

image.png

正确的写法为如下代码

.article a {
    color: #333;
    &:hover {
        color: red;
    }
}

下面这段代码也是重复性的工作

.container h1, .container h2, .container h3{}

用sass就可以改写成如下代码

.container{
  h1,h2,h3{  }
}

nav,aside{
      a{color:blue;}
}

生成css后的代码为

image.png

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

article section{} 表示 article下所有section选择器元素，article>section{} 标识选择article下紧跟着的section 子元素选择器；header + p{
}标识header元素后紧跟的同级p元素；article~article{ }选取所有跟在article后同级article元素。
sass类似写法为如下结构：

article {
    ~article {
        color: #333;
    }
    >section {
        color: #555;
    }
    dl> {
        dt {
            color: #666;
        }
        dd {
            color: #999;
        }
    }
    nav+& {
        margin-top: 0
    }
}

```生成css:```

article ~ article {color: #333; }
article > section { color: #555; }
article dl > dt {color: #666; }
article dl > dd { color: #999; }
nav + article { margin-top: 0; }

嵌套属性

规则：把属性名从中划线的地方断开，在根属性后边添加一个冒号：，紧跟着一个{ }块，把子属性部分写在这个{ }块中

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

``` 生成css:```

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

```另外嵌套写法```
nav{
  border:1px solid #ccc{
    left:0px;
    right:0px;
}
background-color:#ccc;
}
```生成css ```
nav{
  border:1px solid #ccc;
border-left:0px;
border-right:0px;
background-color:#ccc;
}