Sass

一、使用变量

1. 变量申明&变量引用

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

2. 变量名可以使用中划线和下划线同时指向同一个变量

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

在上例中，$link-color和$link_color其实指向的是同一个变量。

二、嵌套css规则

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  #content aside { background-color: #EEE }
}

大多数情况下这种简单的嵌套都没问题，但是有些场景下不行，比如你想要在嵌套的选择器 里边立刻应用一个类似于：hover的伪类。为了解决这种以及其他情况，sass提供了一个特殊结 构&。

1. 父选择器的标识符&

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

当包含父选择器标识符的嵌套规则被打开时，它不会像后代选择器那样进行拼接，而是&被父选择器直接替换

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

2. 群组选择器的嵌套

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

nav, aside {
  a {color: blue}
}

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

子组合选择器>选择一个元素的直接子元素

article > section { border: 1px solid #ccc }

以用同层相邻组合选择器+选择header元素后紧跟的p元素

header + p { font-size: 1.1em }

以用同层全体组合选择器~，选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素

article ~ article { border-top: 1px dashed #ccc }

4.嵌套属性

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

三、导入sass文件

css有一个特别不常用的特性，即@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。

sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。

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

@import（‘color’）

1.使用SASS部分文件

@import "themes/night-sky";   //night-sky是样式名

2.默认变量值

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

四、混合器

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

1.混合器中的CSS规则

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

引用：
ul.plain {
  color: #444;
  @include no-bullets;
}

2.给混合器传参

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

引用：

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

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

3.默认参数值

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

其中$hover和$visited都等于$normal

五、使用选择器继承来精简CSS

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}