sass和css基本一样,增加了一些继承和函数写法
1.变量声明和引用
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
2.嵌套css
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}
(1)对于:hover这种前面需要加&
article a {
color: blue;
&:hover { color: red }
}
(2)使用IE浏览器时,你会通过JavaScript
在<body>
标签上添加一个ie的类名
#content aside {
color: red;
body.ie & { color: green }
}
/*编译后*/
#content aside {color: red};
body.ie #content aside { color: green }
3.群组选择器的嵌套
.container {
h1, h2, h3 {margin-bottom: .8em}
}
4.组合选择器的嵌套
article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}
5.导入sass
@import 'color'
6.继承:何时使用继承
- 你可以为这两个类分别写相同的样式,但是如果有大量的重复怎么办?使用
sass
时,我们提倡的就是不要做重复的工作。 - 你可以使用一个选择器组(比如说
.error
.seriousError
)给这两个选择器写相同的样式。如果.error的所有样式都在同一个地方,这种做法很好,但是如果是分散在样式表的不同地方呢?再这样做就困难多了。 - 你可以使用一个混合器为这两个类提供相同的样式,但当
.error
的样式修饰遍布样式表中各处时,这种做法面临着跟使用选择器组一样的问题。这两个类也不是恰好有相同的 样式。你应该更清晰地表达这种关系。 - 综上所述你应该使用
@extend
。让.seriousError
从.error
继承样式,使两者之间的关系非常清晰。更重要的是无论你在样式表的哪里使用.error
.seriousError
都会继承其中的样式。
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}