嵌套与导入sass文件

嵌套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;

}`

导入S ass文件：****

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;

}`