嵌套与导入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;
}

 

 

 

 

 

 

 

导入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;
}