Sass基本概念介绍文档Sass：Sass基础 1.变量 1-1 声明变量 $ 1-2 变量引用; 1-3 变量名变量

1.变量

1-1 声明变量 $

$highlight-color: #F90;

1-2 变量引用;

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

1-3 变量名

变量名使用中划线或下划线都可以，这两种用法相互兼容这意味着即使compass选择用中划线的命名方式，这并不影响你在使用compass的样式中用下划线的命名方式进行引用。

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

2.嵌套CSS 规则

在Sass中，你可以像俄罗斯套娃那样在规则块中嵌套规则块。sass在输出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 }

2-1 父选择器的标识符(&)

& 代表嵌套规则外层的父选择器。

.box {
  width: 300px;
  height: 300px;
  border: 1px solid red;
  a {
    color: blue;
  }
  h2 {
    color: blue;
  }
  p {
    color: blue;
  }
  :hover {
    color: red;
  }
}


编译后会给没每一个子选择器加上:hover
.box a:hover{
 color: red;
}
.box h2:hover{
 color: red;
}
.box p:hover{
 color: red;
}

使用&规则应用到自身

.box {
  &:hover {
    color: red;
  }
}

编译后
.box:hover {
  color: red;
}

2-2 群组选择器的嵌套

注意群组选择器的规则嵌套生成的css。虽然sass让你的样式表看上去很小，但实际生成的css却可能非常大，这会降低网站的速度。

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

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

2-3 组合选择器

后代选择器（空格分隔）---> A B :匹配 A 元素所有后代中的 B 元素（无论嵌套层级多深）
子元素选择器（> 分隔）---> A > B :仅匹配 A 元素直接子元素中的 B 元素（仅限一级嵌套）
相邻兄弟选择器（+ 分隔）---> A+B :匹配紧跟在 A 元素之后的第一个同级 B 元素。
通用兄弟选择器（~ 分隔） ---> A~B :匹配 A 元素之后所有同级的 B 元素（不限定第一个）
组合选择器（多条件拼接，无分隔符）--->AB（如 div.box、input[type="text"].form-control）:同时满足多个条件的元素（元素类型 + class + 属性等）

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 }

2-4 嵌套属性

嵌套属性的规则是这样的：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。就像css选择器嵌套一样，sass会把你的子属性一一解开，把根属性和子属性部分通过中划线-连接起来，最后生成的效果与你手动一遍遍写的css样式一样

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

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

3. 导入SASS文件

@import以弃用，现使用@use, @forward

4. 注释

标准注释格式/* ... */ ---->会出现在生成的css文件中
静默注释 // --->不会出现在生成的css文件中

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

5. 混合器（@mixin）

混合器是展示性的描述，用来描述一条css规则应用之后会产生怎样的效果，通过sass的混合器实现大段样式的重用。@mixin标识符定义通过，@include来使用这个混合器

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

混合器中不仅可以包含属性，也可以包含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;
}

解析后的代码
ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

5-1 带参混合器

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

sass允许混合器声明时给参数赋默认值。

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

当你@include混合器时，有时候可能会很难区分每个参数是什么意思，参数之间是一个什么样的顺序。为了解决这个问题，sass允许通过语法$name: value的形式指定每个参数的值

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

6. 继承(@extend)

跟混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。如果你非常关心你站点的速度，请牢记这一点。
继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时，并且这两个不同的css规则对同一属性的修饰存在不同的值，css层叠规则会决定应用哪个样式。相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。