sass入门（二）

一. 导入sass文件
@import"sidebar";这条命令将把sidebar.scss文件中所有样式添加到当前样式表中

1.导入局部文件：可省略文件名开头的下划线

例如：你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import “themes/night-sky”;。

2.默认变量值;

一般情况下，你反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值。举例说明：

$link-color: blue;
$link-color: red;
a {
color: $link-color; /*color会被设置为red*/
}

!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width; 
/*如果用户在导入你的sass局部文件之前声明了一个$fancybox-width变量，那么你的局部文件中对$fancybox-width赋值400px的操作就无效。
/*如果用户没有做这样的声明，则$fancybox-width将默认为400px。*/
}

3.嵌套导入

/*有一个名为_blue-theme.scss的局部文件，内容如下：*/
aside {
  background: blue;
  color: white;
}

然后把它导入到一个CSS规则内，如下所示：

.blue-theme {@import "blue-theme"}
/*生成的结果：*/
.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

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

4. 静默注释：其内容不会出现在生成的css文件中，以//开头，注释内容直到行末

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