scss常用语法（摘自sass中文文档）

• sass中文文档https://www.sass.hk/docs/

• 嵌套规则

<div class="hello">
    <label for="search">search</label>
    <input class="search" type="text" label="search" />
    <div class="swap">
      <ul class="nav">
        <li class="item">home</li>
      </ul>
    </div>
</div>
<style lant="scss">
.hello {
  width:80vw;
  .search{
    font-size:24px;
  }
  ul li{
    float:left;
  }
}
</style>

• 父选择器

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器

<style scoped lang="scss">
.hello {
  width:80vw;
  .search{
    font-size:24px;
    &:focus{//& 代表嵌套规则外层的父选择器 input获得焦点是改变边框颜色
      border-color:#0086ff;
    }
  }
}
</style>

& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器，例如

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}
//编译为
#main {
  color: black; }
  #main-sidebar {
    border: 1px solid; }
//当父选择器含有不合适的后缀时，Sass 将会报错

属性嵌套

有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中

<style scoped lang="scss">
.hello {
  width:80vw;
  .search{
    font: {
      size:24px;
      weight:700;
    }
  }
}
</style> 
//编译为
.hello .search{
    font-size:24px;
    font-weight:700;
    }

• 注释

Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会 被完整输出到编译后的 CSS 文件中，而后者则不会

• 变量

$width: 5em;
//使用
#main {
  width: $width;
}
//变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明：
#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

• 运算（加减乘除）

//在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值
p:before {
  content: "I ate #{5 + 10} pies!";
}
//编译为
p:before {
  content: "I ate 15 pies!"; }

• 插值语句#{}

通过 #{} 插值语句可以在选择器或属性名中使用变量

• @-rules与指令

@import

//Sass 允许同时导入多个文件，例如同时导入 rounded-corners 与 text-shadow 两个文件
@import "rounded-corners", "text-shadow";

@media

Sass 中 @media 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套。如果 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。这个功能让 @media 用起来更方便，不需要重复使用选择器，也不会打乱 CSS 的书写流程。

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

@extend

@extend 的作用是将重复使用的样式 (.error) 延伸 (extend) 给需要包含这个样式的特殊样式（.seriousError）

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
//编译为
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); }

.seriousError {
  border-width: 3px; }

 延伸复杂的选择器

Class 选择器并不是唯一可以被延伸 (extend) 的，Sass 允许延伸任何定义给单个元素的选择器，比如 .special.cool，a:hover 或者 a.user[href^="http://"] 等

//同 class 元素一样，a:hover 的样式将继承给 .hoverlink。
.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}

多重延伸

//同一个选择器可以延伸给多个选择器，它所包含的属性将继承给所有被延伸的选择器：
//多重延伸可以使用逗号分隔选择器名，比如 @extend .error, .attention; 与 @extend .error; @extend.attention 有相同的效果
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

混合指令mixin/include

混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class

为便于书写，@mixin 可以用 = 表示，而 @include 可以用 + 表示

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}
//引用混合样式 @include
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}
//编译为
.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }
//混合样式中也可以包含其他混合样式
@mixin compound {
  @include highlighted-background;
  @include header-text;
}
@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }
//混合指令也可以使用给变量赋值的方法给参数设定默认值，然后，当这个指令被引用的时候，如果没有给参数赋值，则自动使用默认值
@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }
//编译为
p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed; }

控制指令

@if、@for、@each、@while