sass

Sass官网：https://www.sass.hk/guide/

变量声明：$

$nav-color这个变量定义在了规则块外边，所以在这个样式表中都可以像nav规则块那样引用它。$width这个变量定义在了nav的{ }规则块内，所以它只能在nav规则块 内使用。在样式表的其他地方定义和使用$width变量，不会对这里造成影响。

且

如果它们出现在任何形式的{…}块中（如@media或者@font-face块），情况也是如此：
例：

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

//编译后

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

默认变量值：!default

sass的!default标签，它很像css属性中!important标签的对立面，不同的是``用于变量

超链接的color会被设置为red。

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

可以在变量的结尾添加 !default，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。
例：

$link-color: blue;
$link-color: red !default;
a {
color: $link-color;
}

变量引用：

凡是css属性的标准值（比如说1px或者bold）可存在的地方，变量就可以使用。

例：

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

//编译后

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

在声明变量时，变量值也可以引用其他变量。$highlight-border变量的声明中使用了$highlight-color这个变量。

例：

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

//编译后

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

嵌套CSS 规则

例1：

#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：

#content {
  background-color: #f5f5f5;
  aside { background-color: #eee }
}

//编译后

#content { background-color: #f5f5f5 }
#content aside { background-color: #eee }

父选择器的标识符：&

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

这意味着color: red这条规则将会被应用到选择器article a :hover，这是不正确的！你想把这条规则应用到超链接自身。

例1：&==article a

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

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

例2: 你可以在父选择器之前添加选择器

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

//编译后


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

群组选择器的嵌套：

例1：

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

//编译后

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

例2：

nav, aside {
  a {color: blue}
}

//编译后

nav a, aside a {color: blue}

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

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 }

嵌套属性

例1：

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

//编译后


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

例2：指明例外规则

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

//编译后


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

继承：@extend

.seriousError将会继承样式表中任何位置处为.error定义的所有样式。

.error {
  border: 1px solid 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;
}

使用选择器占位符：%

.icon { transition: background-color ease .2s; margin: 0 .5em; }
 .error-icon { @extend .icon; /*错误图标指定的样式... */ }
  .info-icon { @extend .icon; /* 信息图标指定的样式... */ }


//编译后


.icon, .error-icon, .info-icon { transition: background-color ease .2s; margin: 0 .5em; } 
.error-icon { /*错误图标指定的样式... */ } 
.info-icon { /* 信息图标指定的样式... */ }

如果我们在HTML中从来不使用.icon
选择器占位符%placeholder可以很好的解决上面提到的问题。编译出来的CSS代码中并不会包括%placeholder规则中的样式

%icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  @extend %icon;
  /*错误图标指定的样式... */
}

.info-icon {
  @extend %icon;
  /* 信息图标指定的样式... */
}


//编译后


.error-icon, .info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  /*错误图标指定的样式... */
}

.info-icon {
  /* 信息图标指定的样式... */
}

编译出来的CSS代码中将不再包括.icon了。

参数：@mixin

@mixin icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  @include icon;
  /*错误图标指定的样式... */
}

.info-icon {
  @include icon;
  /* 信息图标指定的样式... */
}


//编译后


.error-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
  /*错误图标指定的样式... */
}

.info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
  /* 信息图标指定的样式... */
}

仅从维护的角度来说，这是一个很好的扩展的示例，但编译出来的CSS实在是糟糕，因为编译出来的CSS样式，没有把相同的样式合并在一起。

选择器占位符的限制：%

使用@extend调用定义好的选择器占位符%placeholder有所限制，他不能在不同的@media中运行。

%icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

@media screen {
  .error-icon {
    @extend %icon;
  }

  .info-icon {
    @extend %icon;
  }
}

此时编译你的SCSS文件时，编译器将会报错：

>>> Sass is watching for changes. Press Ctrl-C to stop.
      error test.scss (Line 3: You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.
From "@extend %icon" on line 10 of test.scss.
)

因为@extend是将一个选择器样式扩展到另一个选择器当中，而实际上在不同的@media中却无需复制这些样式。

虽然他可以通过其他的方式来工作，在@media块中定义选择器占位符，在@extend调用时，将会将整个样式包含在@media区块中：

@media screen {
  %icon {
    transition: background-color ease .2s;
    margin: 0 .5em;
  }
}

.error-icon {
  @extend %icon;
}

.info-icon {
  @extend %icon;
}

//编译后

@media screen {
  .error-icon, .info-icon {
    transition: background-color ease .2s;
    margin: 0 .5em;
  }
}