一、使用变量
sass让人们受益的一个重要特性就是它为css引入了变量。
sass使用$符号来标识变量(老版本的sass使用!来标识变量)。
【作用】：你可以把反复使用的css属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一 次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。
1、变量声明
sass变量的声明和css属性的声明很像：
$main-color: #F90;
$basic-border: 1px solid black;
$body-font: "Helvetica Neue"、Helvetica、"Liberation Sans"、Arial和sans-serif; sans-serif;
sass的变量名可以与css中的属性名和选择器名称相同，包括中划线和下划线。
$main_color: blue;
.text{
color: $main-color;
}
//编译后
.text {
color: blue;
}
与CSS属性不同，变量可以在 【css规则块定义之外】 存在。当变量定义在css规则块内，那么该变量只能在此规则块内使用。如果它们出现在任何形式的{...}块中（如@media或者@font-face块），情况也是如此：
$section-color: #FF0; 【该代码段之后都有效】
section {
$width: 150px; 【section内有效】
width: $width;
color: $section-color;
}
//编译后
section {
width: 150px;
color: #FF0;
}
2、变量使用
凡是css属性的标准值（比如说1px或者bold）可存在的地方，变量就可以使用。css生成时，变量会被它们的值所替代。之后，如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此变量的地方生成的值都会随之改变。
$main-color: #F90;
.selected {
border: 1px solid $main-color;
}
//编译后
.selected {
border: 1px solid #F90;
}
二、嵌套CSS
传统的重复写css 选择器：
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
sass写法【可读性和可写性更高】：
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
#content aside { background-color: #EEE }
}
/* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
1、选择器之父选择器的标识符&
当包含父选择器标识符的嵌套规则被打开时，它不会像后代选择器那样进行拼接，而是&被父选择器直接替换：
article a {
color: blue;
&:hover { color: red }
}
//编译后
article a { color: blue }
article a:hover { color: red }
2、群组选择器的嵌套
.container h1, .container h2, .container h3 { margin-bottom: .9rem }
.container {
h1, h2, h3 {margin-bottom: .9rem}
}
//编译后
.container h1, .container h2, .container h3 { margin-bottom: .9rem }
3、子组合选择器和同层组合选择器：>、+和~;
上边这三个组合选择器必须和其他选择器配合使用，以指定浏览器仅选择某种特定上下文中的元素。
同层相邻组合选择器 +
header + p { font-size: 1.1em } //选择header元素后紧跟的p元素
同层全体组合选择器 ~
article ~ article { border-top: 1px dashed #ccc } //选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素
直接下层选择器 >
header > p { font-size: 1.1em } //选择header元素直接所有子元素p
三、嵌套属性
在sass中，除了CSS选择器，属性也可以进行嵌套。
nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}
//编译后
nav {
border-style: solid;
border-width: 1px;
border-color: #ccc;
}
嵌套属性的规则是这样的：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。就像css选择器嵌套一样，sass会把你的子属性一一解开，把根属性和子属性部分通过中划线-连接起来，最后生成的效果与你手动一遍遍写的css样式一样。
对于属性的缩写形式，你甚至可以像下边这样来嵌套，指明例外规则：
nav {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}
//编译后
nav {
border: 1px solid #ccc;
border-left: 0px;
border-right: 0px;
}
四、引入sass
css有一个特别不常用的特性，即@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。
sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。另外，所有在被导入文件中定义的变量和混合器均可在导入文件中使用。
1、导入SASS文件;
使用sass的@import规则并不需要指明被导入文件的全名。你可以省略.sass或.scss文件后缀（见下图）。这样，在不修改样式表的前提下，你完全可以随意修改你或别人写的被导入的sass样式文件语法，在sass和scss语法之间随意切换。
@import "themes";
2、导入SASS部分文件;
使用sass的@import规则并不需要指明被导入文件的全名。你可以省略.sass或.scss文件后缀（见下图）。这样，在不修改样式表的前提下，你完全可以随意修改你或别人写的被导入的sass样式文件语法，在sass和scss语法之间随意切换。
@import "themes/night-sky";
3、嵌套导入;
跟原生的css不同，sass允许@import命令写在css规则内。这种导入方式下，生成对应的css文件时，局部文件会被直接插入到css规则内导入它的地方。
有一个名为_color-theme.scss的局部文件，内容如下：
aside {
background: #656789;
color: white;
}
然后把它导入到一个CSS规则内，如下所示：
.blue-theme {@import "blue-theme"}
//编译后
.blue-theme {
aside {
background: #656789;
color: white;
}
}
4、原生的CSS导入;
由于sass兼容原生的css，所以它也支持原生的CSS@import。
在sass中使用@import时，sass会尝试找到对应的sass文件并导入进来，但在下列三种情况下会生成原生的CSS@import，尽管这会造成浏览器解析css时的额外下载：
- 被导入文件的名字以.css结尾；
- 被导入文件的名字是一个URL地址（比如http://www.sass.hk/css/css.css），由此可用谷歌字体API提供的相应服务；
- 被导入文件的名字是CSS的url()值。
五、注释
1 标准注释，css标准注释格式/* ... */
2 静默注释，静默注释的语法跟JavaScriptJava等类C的语言中单行注释的语法相同，它们以//开头，注释内容直到行末。
body {
color: #333; // 这种注释内容不会出现在生成的css文件中
padding: 0; /* 这种注释内容会出现在生成的css文件中 */
font-size /* 这块注释内容不会出现在生成的css中 */ : 12px;
margin: 1; /* 这块注释内容也不会出现在生成的css中 */ 0;
}
六、混合器
1、需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。混合器使用@mixin标识符定义。
//定义了一个混合器
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
//使用了一个混合器
class {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
//编译后
.class {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
2、给混合器传参
混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量。如果你写过JavaScript，这种方式跟JavaScript的function很像：
//定义 $visited 有默认参数值，引用时可不传
@mixin link-colors($normal, $hover, $visited:$normal) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
//使用
a {
@include link-colors(blue, red, green);
}
或者
a {
@include link-colors(
$normal: blue,
$visited: green,
$hover: red
);
}
//编译后：
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
七、选择器继承
使用sass的时候，最后一个减少重复的主要特性就是选择器继承。选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现，如下代码:
//通过选择器继承继承样式
.input {
border: 1px solid red;
background-color: #fdd;
a{
color: #454545
}
.inputNumber {
@extend .input;
border-width: 3px;
}
//编译后
.inputNumber {
border: 1px solid red;
background-color: #fdd;
border-width: 3px;
a{
color: #454545
}
}
八、小结
本文介绍了sass最基本部分,你可以轻松地使用sass编写清晰、无冗余、语义化的css。
变量是sass提供的最基本的工具。通过变量可以让独立的css值变得可重用，无论是在一条单独的规则范围内还是在整个样式表中。变量、混合器的命名甚至sass的文件名，可以互换通用_和-。
嵌套允许css规则内嵌套css规则，减少重复编写常用的选择器，sass同时提供了特殊的父选择器标识符&，通过它可以构造出更高效的嵌套。
通过样式导入可以把分散在多个sass文件中的内容合并生成到一个css文件，避免了项目中有大量的css文件通过原生的css @import带来的性能问题。
混合器允许用户编写语义化样式的同时避免视觉层面上样式的重复。
sass中文网 https://www.sass.hk/guide/
网友评论