Sass基础

变量声明

使用$进行定义

$highlight-color: #F90;

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

变量引用

$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}

//编译后

.selected {
  border: 1px solid #F90;
}

变量和中划线与下划线

$link-color: blue;
a {
  color: $link_color;
}

//编译后

a {
  color: blue;
}

$link-color和$link_color是同一个变量，sass采用了兼容

嵌套规则

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  #content aside { background-color: #EEE }
}
 /* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

父选择器&

当你嵌套的内容不想应用父元素的所有元素时，例如在使用 :hover 的时候

article a {
  color: blue;
  :hover { color: red }
}

这样写的话，article中的所有链接的内容被点击的时候都会变成红色，为了防止这样的事情发生，就需要使用&

article a {
  color: blue;
  &:hover { color: red }
}

 群组选择器的嵌套

在CSS里边，选择器h1h2和h3会同时命中h1元素、h2元素和h3元素。与此类似，.button button会命中button元素和类名为.button的元素。这种选择器称为群组选择器。

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

上面的代码每一个选择器前都重复一遍容器元素的选择器，当sass解开一个群组选择器规则内嵌的规则时，它会把每一个内嵌选择器的规则都正确地解出来：

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

子组合选择器和同层组合选择器：>、+和~

组合选择器里面的>、+、~都可以运用到sass中

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

编译后

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 }

嵌套属性

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

向上面这样的border属性，saa也可以进行嵌套，嵌套属性的规则是这样的：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。就像css选择器嵌套一样，sass会把你的子属性一一解开，把根属性和子属性部分通过中划线-连接起来，

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

导入SASS文件

使用@import 进行导入，生成css文件时就把相关文件导入进来。使用sass的@import规则并不需要指明被导入文件的全名。你可以省略.sass或.scss文件后缀

使用SASS部分文件

sass局部文件的文件名以下划线开头。这样的话，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。

嵌套导入

有一个名为_blue-theme.scss的局部文件，内容如下：

aside {
  background: blue;
  color: white;
}

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

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

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

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

原生的CSS导入

由于sass兼容原生的css，所以它也支持原生的CSS@import。尽管通常在sass中使用@import时，sass会尝试找到对应的sass文件并导入进来，但在下列三种情况下会生成原生的CSS@import，尽管这会造成浏览器解析css时的额外下载：

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

 注释

使用 // 或者 /* */

混合器

 混合器使用@mixin标识符定义。看上去很像其他的CSS @标识符，比如说@media或者@font-face。这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。例如下方的混合器：

@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;
}

判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字。 

混合器传参

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

//当混合器被@include时，你可以把它当作一个css函数来传参。如果你像下边这样写：

a {
  @include link-colors(blue, red, green);
}

//Sass最终生成的是：

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

默认参数值 

为了在@include混合器时不必传入所有的参数，我们可以给参数指定一个默认值。参数默认值使用$name: default-value的声明形式，默认值可以是任何有效的css属性值，甚至是其他参数的引用，

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

如果像下边这样调用：@include link-colors(red) $hover和$visited也会被自动赋值为red。