Sass常用标识符与关键字

变量 - $

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

//编译后

a {
   
  color: blue;
}

在Sass中-和_是等价的。

关键字	意义
!default	结合@import的引用，可以作为被引入文件中某变量的默认值。
!global	将局部变量转换为全局变量。

父选择器 - &

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

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

子组合选择器 - >

article {
   
  > section {
    background: #eee }
  dl > {
   
    dt {
    color: #333 }
    dd {
    color: #555 }
  }
}

/** 编译后 */
article > footer {
    background: #eee }
article dl > dt {
    color: #333 }
article dl > dd {
    color: #555 }

同层相邻组合选择器 - +

article {
   
  nav + & {
    margin-top: 0 }
}

/** 编译后 */
nav + article {
    margin-top: 0 }

同层全体组合选择器 - ~

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

/** 编译后 */
article ~ article {
    border-top: 1px dashed #ccc }

占位符选择器 - %

搭配@extend使用，看起来很像普通的id或 class选择器，只是#或.被替换成了 %。

// This ruleset won't be rendered on its own.
#context a%extreme {
   
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

// 占位符选择器本身不会被编译。
.notice {
   
  @extend %extreme;
}

// 编译为
#context a.notice {
   
  color: blue;
  font-weight: bold;
  font-size: 2em; }

静默注释 - /* … */

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

// 当注释出现在原生css不允许的地方，如在css属性或选择器中，sass将不知如何将其生成到对应css文件中的相应位置，于是这些注释被抹掉
body {
   
  color /* 这块注释内容不会出现在生成的css中 */: #333;
  padding: 1; /* 这块注释内容也不会出现在生成的css中 */ 0;
}

导入 - @import

作用：在生成css文件时就把相关文件导入进来。

嵌套导入

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

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

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

原生的CSS导入

因为sass的语法完全兼容css，所以你可以把原始的css文件改名为.scss后缀，即可直接导入了。

混合器 - @mixin @include

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