嵌套css:
Sass把同属于一个类的属性嵌套在一起,避免重复书写。sass在输出css时会你这些嵌套规则处理好,避免重复书写。如下:
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}
/* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
&父选择器标识符
一般情况下,sass在解开一个嵌套规则时就会把父选择器(#content)通过一个空格连接到子选择器的前边(article和aside)形成(#content article和#content aside)。这种在CSS里边被称为后代选择器,因为它选择ID为content的元素内所有命中选择器article和aside的元素。但在有些情况下你却不会希望sass使用这种后代选择器的方式生成这种连接。
最常见的一种情况是当你为链接之类的元素写:hover这种伪类时,你并不希望以后代选择器的方式连接。比如说,下面这种情况sass就无法正常工作:
article a {
color: blue;
:hover { color: red }
}
这意味着color: red这条规则将会被应用到选择器article a :hover,article元素内链接的所有子元素在被hover时都会变成红色。这是不正确的!你想把这条规则应用到超链接自身,而后代选择器的方式无法帮你实现。
解决之道为使用一个特殊的sass选择器,即父选择器。使用&可以解决问题,如下:
article a {
color: blue;
&:hover { color: red }
}
当包含父选择器标识符的嵌套规则被打开时,它不会像后代选择器那样进行拼接,而是&被父选择器直接替换:
article a { color: blue }
article a:hover { color: red }
子组合选择器和同层组合选择器:>、+和~;
这些组合选择器可以应用到sass的规则嵌套中。可以把它们放在外层选择器后边,或里层选择器前边:
article {
~ article { border-top: 1px dashed #ccc }
> 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 }
嵌套属性:
在sass中,除了CSS选择器,属性也可以进行嵌套。
nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}
嵌套属性的规则是这样的:把属性名从中划线-的地方断开,在根属性后边添加一个冒号:,紧跟一个{ }块,把子属性部分写在这个{ }块中。
nav {
border-style: solid;
border-width: 1px;
border-color: #ccc;
}
导入sass文件:
css有一个特别不常用的特性,即@import规则,它允许在一个css文件中导入其他css文件。然而,后果是只有执行到@import时,浏览器才会去下载其他css文件,这导致页面加载起来特别慢。
sass也有一个@import规则,但不同的是,sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中,而无需发起额外的下载请求。另外,所有在被导入文件中定义的变量和混合器(参见2.5节)均可在导入文件中使用。
如下:
Common.scss文件:
$info:blue;
$error:red;
//声明函数
@mixin border-radius {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
//嵌套
@mixin h-ul{
display: flex;
justify-content: space-between;
align-items: center;
li{
list-style: none;
}
}
//参数
@mixin border($w,$s,$c:red){
border: $w $s $c;
}
html{
margin: 0;
}
Sass.scss文件:
@import "./common.scss";//导入的语法
body{
button{
color: $error;
@include border-radius;
@include border(2px, solid, red)
}
a{
@include border-radius;
}
ul{
@include h-ul;
@include border($w:2px,$c: red, $s:dotted)
}
div{
border: 1px solid red;
background-color: red;
}
span{
@extend div;
font-size: 20px;
background-color: transparent;
}
}
编译后:sass.css文件:
html {
margin: 0;
}
body button {
color: red;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 2px solid red;
}
body a {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
body ul {
display: flex;
justify-content: space-between;
align-items: center;
border: 2px dotted red;
}
body ul li {
list-style: none;
}
body div, body span {
border: 1px solid red;
background-color: red;
}
body span {
font-size: 20px;
background-color: transparent;
}