一、@import 导入

​ CSS有一个 @import 规则，可以在一个css文件中导入其他css文件，然而这样会有一个弊端：只有执行到@import 语句所在行的之后，浏览器才会去加载相应的css文件，这会导致页面加载变慢。而Sass在css的基础上改进了@import 规则，但你在.sass/.scss 文件中 通过@import引用样式文件时，它就会在编译成css文件时，就把相关文件导入，相当于所有相关的样式被归纳到了一个css文件中，浏览器只需发起一次加载请求。

​ @import 导入的规则，可以使样式的可重用性变得更高。并且被导入文件中的变量和混合器也都可在导入文件中使用。

1、缩写规则

​ 使用 sass的 @import 规则时，可以省略 .sass/.scss 的文件名后缀。

/* 导入colors.scss */
@import "colors"
/* 导入mixins.sass */
@import "mixins"

2、局部文件

​ 在项目中，有很多的 .sass/.scss 文件，我们并不想让他单独编译成一个css文件，只是想将其作为一个工具文件，在其他的 .sass/.scss 文件中，通过@import 引用。这样的文件，就称为局部文件。局部文件可以在多个文件中被引用。

​ 我们通常约定这样的局部文件，命名以下划线开头，这样sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。而且当 @import 引入这类文件时，可以省略文件名开头的下划线。

/* 导入 _fonts.scss */
@import "fonts"

3、默认变量值

​ 正常情况下，sass中定义的变量遵循后者覆盖前者的规则，也就是多次声明一个变量，只有最后一处声明有效且它会覆盖前边的值。但是如果我们给一个变量赋值之后，想要实现无论在这个变量之前，还是变量之后再次声明并赋值了这个变量，那么则采用再次声明时的值，而非我们定义的值，此时我们就需要借助 !default 。

​ !default 与css的 @important 作用恰恰相反，是将这次变量值的优先级降到最低，像是一个默认值，只要这个变量在别的地方被声明赋值了，无论位置在前在后，都会采用它再次声明的值，黑油再次声明赋值的情况才会用这个默认值。

/* 在前面定义的变量值  */
$fancybox-width: 500px
/* 在后面定义的变量值 */
/* 虽然是在后面定义，但是加上了 !default 优先级最低 还是回取前面定义的值 */
$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}

4、嵌套导入

​ sass允许将@import 命令写在 css 的规则块{...}内，在编译时，局部文件的内容会直接插入到对应的规则块内：

/* 被导入的_blue-theme.scss文件内容 */
aside {
  background: blue;
  color: white;
}
/* 要导入的文件 */
.blue-theme {
   @import "blue-theme"
}

/* 编译结果 */
.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

5、原生的css导入

​ sass兼容原生的css，所以也支持@import原生的 .css文件，但在编译时并不会进行代码合并，而且像原生css导入时，额外下载的形式执行。以下三种情况会在使用原生的css导入：

• 被导入文件的名字以.css结尾；
• 被导入文件的名字是一个URL地址（比如http://www.sass.hk/css/css.css），由此可用谷歌字体API提供的相应服务；
• 被导入文件的名字是CSS的url()值。

​ 也就是说：如果你直接用用sass的@import直接导入一个原始的css文件，sass会认为你想用css原生的@import。但是，因为sass的语法完全兼容css，所以你可以把原始的css文件改名为.scss后缀，即可直接导入了。

二、注释

1、普通注释 /**/

​ sass中兼容css原生的 /*...*/ 注释形式，但这种注释会出现在生成的css文件中，可以被每个浏览网站源码的人都能看到。所以sass提出了第二种注释方法。

2、静默注释 //

​ 静默注释，也就是 // ... 的形式书写注释，这种注释后会在sass编译成css的时候，被抹除，不会被开发者之外的人看到。

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

三、运算

1、算术运算

​ Sass 支持对变量或值进行运算，支持 +、-、*、/、%、==、!=、>、< 等运算符。对于两个不同单位之间的运算，运算结果取第一个值的单位。如果两个值之间只有一个值有单位，则运算结果就取该单位。

// sass + 运算
p {
  width: 1in + 8pt;
}
// 编译后
p {
  width: 1.111in; 
}

2、除法运算

​ / 在 CSS 中通常起到分隔数字的用途，在sass中也增加了 除法运算的功能，在以下三种情况下，会进行除法操作，其他情况都将是分隔数字的作用：

• 如果值，或值的一部分，是变量或者函数的返回值
• 如果值被圆括号包裹
• 如果值是算数表达式的一部分

// sass
p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}
// 编译后
p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; 
}

3、颜色运算

​ 在sass中，16进制和RGB表示的颜色的值，也是可以进行运算的：

// sass  
p {
  color: #010203 + #040506;
}
// 分别计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09
// 编译后
p {
  color: #050709; 
}
// sass
p {
  color: #010203 * 2;
}
// 分别计算 01 * 2 = 02 02 * 2 = 04 03 * 2 = 06
// 编译后
p {
  color: #020406; 
}
// sass
p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}
// 编译后
p {
  color: rgba(255, 255, 0, 0.75); 
}

4、字符串运算

​ 在sass中可以通过 + 来连接字符串：

// sass
p {
  cursor: e + -resize;
}
// 编译后
p {
  cursor: e-resize; 
}