Sass初入门

1、通过$声明变量

$highlight-color: #F90;

$basic-border: 1px solid black;

注意:变量可以在css规则块定义之外存在。当变量定义在css规则块内，那么该变量只能在此规则块内使用。

用中划线声明的变量可以使用下划线的方式引用，反之亦然。

2、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、父选择器标识符&

#content aside {
  color: red;
  body.ie & { color: green }
}

/*编译后*/
#content aside {color: red};
body.ie #content aside { color: green 

2/2、

.container {
  h1, h2, h3 {margin-bottom: .8em}
}
.container h1, .container h2, .container h3 { margin-bottom: .8em }

2/3、

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

sass会如你所愿地将这些嵌套规则一一解开组合在一起：

article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

2/4、嵌套

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

嵌套属性的规则是这样的：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。就像css选择器嵌套一样，sass会把你的子属性一一解开，把根属性和子属性部分通过中划线-连接起来，最后生成的效果与你手动一遍遍写的css样式一样：

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

这比下边这种同等样式的写法要好：

nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

3、导入.scss/.sass文件

使用sass的@import规则并不需要指明被导入文件的全名。你可以省略.sass或.scss文件后缀

sass局部文件的文件名以下划线开头、只把这个文件用作导入

当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线

3/1、默认变量值 !default

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}

1）如果用户在导入你的sass局部文件之前声明了一个$fancybox-width变量，那么你的局部文件中对$fancybox-width赋值400px的操作就无效。

2）如果用户没有做这样的声明，则$fancybox-width将默认为400px

3/2、嵌套导入

aside {
  background: blue;
  color: white;
}

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

.blue-theme {@import "blue-theme"}

//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。

.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

4、静默注释  //

内容不会出现在生成的css文件中

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

5、定义重用样式块（混合器）

@include调用会把混合器中的所有样式提取出来放在@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;
}

//sass最终生成：

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

5/1、混合器传参

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

保证顺序
a {
  @include link-colors(blue, red, green);
}

//Sass最终生成的是：

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

不关注顺序
a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

5/2、默认参数

@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

6、继承@extend

.seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承，如下代码:

当一个元素拥有的类（比如说.seriousError）表明它属于另一个类（比如说.error），这时使用继承再合适不过了

.disabled {
  color: gray;
  @extend a;
}