Sass的使用

1.使用变量

​ 1.1变量声明：sass使用$符号来标识变量1.2变量引用：就像JavaScript中声明的变量一样，在其他地方可以引用.值得注意的是当变量定义在css规则块内{...}，那么该变量只能在此规则块内使用。这也意味着，不同的规则块内可以声明相同变量命(如nav中的​ $width和section中的​​ $width)。而定义在规则块外的变量则不受这样的约束。

 $bg-color:red;

​ nav {

    ​ $width: 100px;

​     width: $width;

​     background-color: $bg-color;

​ }

​ section {

    ​ $width: 200px;

​     width: $width;

​     background-color: $bg-color;

​ }

2.css嵌套规则

sass可以让你只写一遍，且使样式可读性更高。在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 }

2.1. 父选择器的标识符&

当我们用到伪类的时候,sass是这样实现的,在编译的时候将 & 被替换成了 (article a)父选择器

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

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

2.2.群组选择器的嵌套

nav, aside {
  a {color: blue}
}

/* 编译后 */
nav a, aside a {color: blue}

2-3. 子组合选择器>  和同层组合选择器 +和~;

   <section>
        <header>标题</header>
        <p>第一段</p>
        <p>第二段</p>
    </section>

section {
  > header {
    color:red;
    + p {
      color:green;
    }
    ~ p {
      color:yellow;
    }
  }
}

上述例子中：

子组合选择器 > 选中了一个section标签的直接子元素header

同层相邻组合选择器 + 选中了第一个p标签

同层全体组合选择器 ~ 选中了所有p标签

3. 导入SASS文件

sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。

假如有index.scss和base.scss两个scss文件，base.scss中是一些公共样式，而且你不想让他生成独立的.css文件，那么你可以在index.scss中用@import"base.scss"导入base.scss文件。这样就只生成了index.css文件。

4.注释

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

5. 混合器(个人理解为一大段可以重复使用的样式)

混合器使用@mixin标识符定义。通过@include来使用这个混合器

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

/* 编译后 */
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

值得注意的是：混合器主要用于展示性样式的重用，而类名用于语义化样式的重用。

总结一下：使用sass编写清晰、无冗余、语义化的css。

1.变量是sass提供的最基本的工具。通过变量可以让独立的css值变得可重用

2.sass的嵌套机制允许css规则内嵌套css规则，减少重复编写常用的选择器，同时让样式表的结构一眼望去更加清晰。

3.sass的另一个重要特性，样式导入。通过样式导入可以把分散在多个sass文件中的内容合并生成到一个css文件，避免了项目中有大量的css文件通过原生的css @import带来的性能问题

说到底，还是为了实现重用来提高性能和可维护性。