scss常规用法

保持sass条理性和可读性的最基本的三个方法：嵌套、导入和注释。
一般情况下，你反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值。
$link-color: blue;
$link-color: red;
a {
color: $link-color;
}
最终编译成为红色
---------------------------------
& 在编译时将被替换为父选择符,如果你有一个深层嵌套的规则，父选择符也会在 & 被替换之前被完整的解析。
#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}
---------------------------------
被编译为：
#main {
  color: black; }
  #main a {
    font-weight: bold; }
    #main a:hover {
      color: red; }
---------------------------------
声明:$width: 5em;
#main {
  width: $width;
}
---------------------------------
数据类型
SassScript 支持六种主要的数据类型：
数字（例如 1.2、4、6px）
文本字符串，无论是否有引号（例如 "bob"、‘wow‘、seo）
颜色（例如 blue、#000、rgba(0, 0, 0, 0.8)）
布尔值（例如 true、false）
空值（例如 null）
值列表，用空格或逗号分隔（例如 1em 2em 3rem 4em、Helvetica, Arial, sans-serif）
SassScript 还支持所有其他 CSS 属性值类型， 例如 Unicode 范围和 !important 声明。 然而，它不会对这些类型做特殊处理。 它们只会被当做不带引号的字符串看待。
---------------------------------
CSS 提供了两种类型的字符串：带引号的字符串，不带引号的字符串，使用#{}插值时，引用的字符串不加引号。这使得在mixin中使用例如选择器名称更容易
@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}

@include firefox-message(".header");
---------------------------------
被编译为：
body.firefox .header:before {
  content: "Hi, Firefox users!"; }
---------------------------------
继承:
.class1 {
　　border: 1px solid #ddd;
}
.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}
---------------------------------
Mixin有点像C语言的宏（macro），是可以重用的代码块
使用@include命令，调用这个mixin。
mixin的强大之处，在于可以指定参数和缺省值。
@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}

div {
　　　　@include left;
　　}

@mixin left($value: 10px) {
　　　　float: left;
　　　　margin-right: $value;
　　}
---------------------------------
默认变量值;
不同的是!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。
$textbox-width: 400px !default;
.textbox {
　　width: $textbox-width;
}

原文地址：https://www.cnblogs.com/lhl66/p/8271254.html