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