scss语法

scss是css的预编译语言，写法更灵活

声明变量
1.使用$符号来标识变量

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

//编译后

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

嵌套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 }

父选择器的标识符&

article a {
  color: blue;
  &:hover { color: red }
}
/* 编译后 */
article a { color: blue }
article a:hover { color: red }

群组选择器的嵌套

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

/*编译后*/

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

nav, aside {
  a {color: blue}
}

/*编译后*/

nav a, aside a {color: blue}

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

// > 子代选择器
article > section { border: 1px solid #ccc }

// 同层相邻组合选择器+选择header元素后紧跟的p元素
header + p { font-size: 1.1em }

//同层全体组合选择器~
article ~ article { border-top: 1px dashed #ccc }

嵌套属性

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

/*编译后*/
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;
}

导入SASS文件

// name: _blue-theme.scss
aside {
  background: blue;
  color: white;
}

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

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

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

静默注释

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

混合器（公用代码片段）

// 通过@mixin 来定义
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

// 通过@include 来调用
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

给混合器传参

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

---------------------------
// 也可以这么调用$name:value
a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

使用选择器继承来精简CSS

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

.seriousError {
  @extend .error;
  border-width: 3px;
}

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

//.seriousError从.error继承样式
.error a{  //应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //应用到hl.seriousError
  font-size: 1.2rem;
}