sass学习笔记(2)

1.父选择器的标识符&

下面这种sass就无法工作

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

解决的方法就是使用一个特殊的sass选择器&,如下所示:

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

/编译后/
article a { color: blue }
article a:hover { color: red }

可以在父选择器之前添加选择器

content aside {

color: red;
body.ie & { color: green }
}

/编译后/

content aside {color: red};

body.ie #content aside { color: green }


### 2.群组选择器的嵌套
下面的修改将浪费大量的时间在写选择器上

.container h1, .container h2, .container h3 { margin-bottom: .8em }


sass 的嵌套在某些特定的场景下非常有用,当sass解开一个群组选择器规则内嵌规则时,它会把每一个内嵌选择器的规则都正确的解出来:

.container {
h1, h2, h3 {margin-bottom: .8em}
}

### 3.子组合选择器和同层组合选择器:>、+和~
article {
article

section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}

/sass会如你所愿地将这些嵌套规则一一解开组合在一起:/

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


### 4.嵌套属性

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

嵌套属性的规则是这样的:把属性名从中划线-的地方断开,在根属性后边添加一个冒号:,紧跟一个{ }块,把子属性部分写在这个{ }块中。就像css选择器嵌套一样,sass会把你的子属性一一解开,把根属性和子属性部分通过中划线-连接起来,最后生成的效果与你手动一遍遍写的css样式一样:

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

对于属性的缩写形式,你甚至可以像下边这样来嵌套,指明例外规则:

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

编译之后

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

posted @ 2019-07-29 11:44  Heson  阅读(142)  评论(0编辑  收藏  举报
Live2D