【Sass-02】Sass基础语法

Sass 简介

Sass stands for Syntactically Awesome Stylesheets Sass, and was
created by Hampton Catlin. It’s a way to simplify your CSS workflow,
making development and maintenance tasks easier.
Sass是一个能够CSS预编译的工具，能够提升开发效率。

Sass 语法

1. 变量
   变量通过$+变量名来定义

   $font-color:yellow;body{font-color:$font-color;}

   编译后

   body{font-color:yellow;}

2. 嵌套

   nav{    font-size:16px;    ul{    font-size:14px;    {}

   编译后

   ```nav {font-size:16px;}nav ul{ font-size:14px;}```

3. Sass部件
   如果以下划线_开头的scss文件，会被认为是sass的一部分，不会编译成.css文件。和import一起用。
   

4. import

   import的时候不用加.scss后缀sass可以自动识别。

5. Mixins

   函数定义方式:@mixin + 函数名称+ 参数，可以传入参数，通过@include来调用并传入参数。
   
   编译后：
   

6. Extends/Inheritance

   通过@extend关键字来继承一些公有属性。
   
   编译后：
   

7. Operators 操作符

   包括加减乘除和%.

   
   编译后：