Sass的使用

一、什么是Sass

        Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

二、功能  

• 完全兼容 CSS3
• 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
• 通过函数进行颜色值与属性值的运算
• 提供控制指令等高级功能
• 自定义输出格式

 三、为什么使用 Sass?

CSS 本身语法不够强大，导致重复编写一些代码，无法实现复用，而且在代码也不方便维护。

Sass 引入合理的样式复用机制，增加了规则、变量、混入、选择器、继承、内置函数等等特性。

四、 Sass变量

 !global： 全局作用域

sass代码

$Font: 宋体;
$Color: red;
$FontSize: 18px;
$Width: 680px;

body {
  font-family: $Font;
  font-size: $FontSize;
  color: $Color;
}

div {
  width: $Width;
}

p{
  $Color: green !global;  // 全局作用域
  color: $Color;

}

css代码 

@charset "UTF-8";
body {
  font-family: 宋体;
  font-size: 18px;
  color: red;
}

div {
  width: 680px;
}

p {
  color: green;
}

注意：所有的全局变量我们一般定义在同一个文件index.scss，然后我们使用  @include 来包含该文件。

五、嵌套规则与属性

Sass 嵌套 CSS 选择器类似于 HTML 的嵌套规则。

1、嵌套规则

sass代码

nav {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    li {
      display: inline-block;
    }
    a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
      &:hover{
        background-color: red;
      }
    }
  }

css代码

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

nav a:hover {
  background-color: red;
}

 2、嵌套属性

Scss

font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}

css

font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;

text-align: center;
text-transform: lowercase;
text-overflow: hidden;

六、Sass 导入文件

使用@import导入文件

Sass 代码：

@import "variables";
@import "colors";
@import "reset";

接下来我们创建一个 reset.scss 文件：

reset.scss 文件代码：

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

然后我们在 standard.scss 文件中使用 @import 指令导入 reset.scss 文件：

standard.scss 文件代码：

@import "reset";

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

将以上代码转换为 CSS 代码，如下所示：

Css 代码：

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}