4.1 SASS入门
SASS是一种对CSS进行了扩充的开发工具，它提供了许多便利的写法，使得CSS的开发变得简单和可维护，大大节省了样式设计者尤其是有编程背景的样式设计者的时间。符合SASS语法的文件就是普通的文本文件，里面可以直接使用CSS语法。SASS文件后缀名是．scss，意思为Sassy CSS。因此有时候SASS和SCSS两个词是可以混用的。
Ionic提供的样式文件就是基于SASS开发的。考虑到部分读者从未接触过SASS，本书将重点介绍Ionic涉及的SASS语法，并不打算变成一个完整的SASS说明文档。有通读需要的读者可以到SASS的官方网站学习SASS的更多特性和样例：http://sass-lang.com/documentation/file.SASS_REFERENCE.html。
编写完成的SASS文件需要经过编译处理转换成浏览器可以识别的CSS代码，在Ionic里有本章4.3节介绍的Gulp调用相关模块完成编译。在开发者日常编写调试时，可以使用一个在线SASS服务网站（http://www.sassmeister.com/）的即时编译转换功能获得CSS代码，如图4.1所示。
图4.1 使用在线网站（http://www.sassmeister.com/）的即时编译转换功能获得CSS代码
4.1.1 变量与计算
SASS允许定义变量，变量需要冠以$前缀，如：
$period : 1s;
$effect : ease-in;
$trans_property : all;
a {
-moz-transition: $trans_property $period $effect;
-webkit-transition: $trans_property $period $effect;
-o-transition: $trans_property $period $effect;
transition: $trans_property $period $effect;
}
经转换后的CSS代码为：
a {
-moz-transition: all 1s ease-in;
-webkit-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
transition: all 1s ease-in;
}
【代码解析】从代码上看似乎使用SASS变量的源代码更长，但是有了变量遇到以后的调整变化时，就只需要在变量定义的地方变更值，而不用通过全文搜索去替换。相信有过网站维护经验的读者能够体会SASS变量的好处。这也是Ionic在定义CSS样式类使用的最常见模式。
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中，如：
$side : left;
$default_radius : 5px;
.rounded {
border-#{$side}-radius: $default_radius;
}
经转换后的CSS代码为：
.rounded {
border-left-radius: 5px;
}
【代码解析】这种字符串替换经常被使用在组合型的CSS属性名上。
SASS允许在代码中使用计算表达式，如：
$var : 2;
$more_px : 10px;
body {
margin: (16px/2);
top: 100px + 5 * $more_px;
right: $var * 10%;
}
经转换后的CSS代码为：
body {
margin: 8px;
top: 150px;
right: 20%;
}
【代码解析】变量也可以出现在计算表达式中，这样就更灵活了。
4.1.2 样式嵌套
标准的CSS只能支持单层的选择器{}块结构，对于习惯了JavaScript开发的人来说无疑是值得改进的一个地方。而经SASS扩展，可以允许无限层的选择器嵌套，如：
$default_font_size: 100%;
.container {
h1 {
color:red;
font-size: $default_font_size * 2;
}
h2 {
color:blue;
font-size: $default_font_size * 1.5;
}
}
经转换后的CSS代码为：
.container h1 {
color: red;
font-size: 200%;
}
.container h2 {
color: blue;
font-size: 150%;
}
【代码解析】从代码可以看到，生成后的CSS代码是松散的平面结构，而SASS的代码明显更有逻辑性。
CSS属性名也可以嵌套生成，如：
div.container {
border: {
color: green;
}
border-left: {
color: red;
}
}
经转换后的CSS代码为：
div.container {
border-color: green;
border-left-color: red;
}
【代码解析】从代码可以看到，在border和border-left后分别加上冒号后，生成的CSS会使用-号来连接生成最终的属性名。
在嵌套的代码块内，可以使用&占位符表示引用父元素。如：
a {
&:link { color: blue; }
&:visited { color: green; }
&:active { color: blue; }
&:hover {
color: red;
font-weight: bold;
}
}
经转换后的CSS代码为：
a:link {
color: blue;
}
a:visited {
color: green;
}
a:active {
color: blue;
}
a:hover {
color: red;
font-weight: bold;
}
【代码解析】从本示例代码的里可以看出使用SASS的深层嵌套在属性较多时有可能可以减少编写的代码量，代码结构也更具有可读性。
4.1.3 单行注释 //
SASS是CSS的超集，因此标准的CSS注释 /* comment */，会保留到编译后生成的文件。而为了方便开发人员的调试，SASS支持了类似JavaScript的单行注释符//，如：
/*
这是单行注释，将被保留
*/
p{
color: red; // 单行注释示例
font-size: 10px; /* CSS原生注释风格示例 */
}
经转换后的CSS代码为：
/*
这是单行注释，将被保留
*/
p {
color: red;
font-size: 10px;
/* CSS原生注释风格示例 */
}
【代码解析】最终在生成的CSS代码里，标准的CSS注释被保留，单行注释符//被忽略省去，出于保护目的不愿把内部注释发布到网上的开发者也可以考虑使用这个方法。
4.1.4 继承@extend
SASS允许一个选择器继承另一个选择器，如：
.classParent1{
border: 1px solid #ddd;
}
.classParent2{
color: red;
text-align: center;
}
.classChild {
@extend .classParent1;
@extend .classParent2;
font-size:120%;
}
p {
@extend .classParent1;
@extend .classParent2;
font-size:120%;
}
经转换后的CSS代码为：
.classParent1, .classChild, p {
border: 1px solid #ddd;
}
.classParent2, .classChild, p {
color: red;
text-align: center;
}
.classChild {
font-size: 120%;
}
p {
font-size: 120%;
}
【代码解析】这里可以看到SASS跟CSS代码相比的好处是既通过@extend继承了父CSS类的样式属性，又把相关的声明都放在子CSS类或子元素声明里，这样的代码结构可阅读可维护性明显更佳。
提示
此处的通过@extend只能继承CSS类，即父类只能是CSS类，而不能是元素。
4.1.5 混入@mixin与@include
最早的SASS是用Ruby开发的，因此该语言的作者引入了一些类似Ruby的语言结构，其中就有用于实现多重继承的混入（Mixin）。混入有点像C语言的宏，是可以定义以后在被引入的地方展开而达到重用的代码块。
首先需要使用@mixin命令，定义一个代码块，随后再使用@include命令，调用这个混入代码块使之原地展开，如：
$border-width : 1px;
@mixin left-setting {
float: left;
margin-left: 10px;
padding-left: 2px;
border-left: $border-width;
}
div {
@include left-setting;
}
经转换后的CSS代码为：
div {
float: left;
margin-left: 10px;
padding-left: 2px;
border-left: 1px;
}
【代码解析】如代码所示，混入定义本身并不生成CSS代码，它类似于静态库被嵌入，当一个元素或者CSS类引入了多个混入代码块，则就相当于实现了多重继承的概念了。
提示
此处变量$border-width的定义位置需要在名为left-setting的混入之前，否则将无法获取该变量的值。这种要求是SASS编译器本身的限制导致的。
混入还可以指定参数和默认值，既像C语言的宏又强于它，如：
@mixin left-setting($border-width: 3px) {
float: left;
margin-left: 10px;
padding-left: 2px;
border-left: $border-width;
}
div {
@include left-setting;
}
div.special{
@include left-setting(5px);
}
经转换后的CSS代码为：
div {
float: left;
margin-left: 10px;
padding-left: 2px;
border-left: 3px;
}
div.special {
float: left;
margin-left: 10px;
padding-left: 2px;
border-left: 5px;
}
【代码解析】如代码所示，生成的第一个元素在引入时使用了默认参数值，而第二个在引入时使用了指定参数值。
Ionic的SASS代码里大量使用了混入结构，其中就有一个文件，路径为\项目目录\www\lib\ionic\scss\_mixins.scss，文件内容为定义的所有的混入，以下为其中一小段代码片段：
// Single Corner Border Radius
@mixin border-top-left-radius($radius) {
-webkit-border-top-left-radius: $radius;
border-top-left-radius: $radius;
}
@mixin border-top-right-radius($radius) {
-webkit-border-top-right-radius: $radius;
border-top-right-radius: $radius;
}
@mixin border-bottom-right-radius($radius) {
-webkit-border-bottom-right-radius: $radius;
border-bottom-right-radius: $radius;
}
@mixin border-bottom-left-radius($radius) {
-webkit-border-bottom-left-radius: $radius;
border-bottom-left-radius: $radius;
}
【代码解析】这样为针对两种不同的浏览器分别定义元素的四个角的圆角半径提供了简单的方式。
4.1.6 颜色计算
SASS提供了一些内置的颜色函数，以便通过种子颜色生成系列颜色，这样能够节省大量的自行计算和查找调色板的时间，常见的颜色函数与使用方式如下所示。
$main_color: #336699;
$second_color: #993266;
#page1{
//提升亮度
color: lighten($main_color, 10%);
}
#page2{
//降低亮度
color: darken($main_color, 10%);
}
#page3{
//提升饱和度
color: saturate($main_color, 10%);
}
#page4{
//降低饱和度
color: desaturate($main_color, 10%);
}
#page5{
//调整色调
color: adjust-hue($main_color, 10%);
}
#page6{
//取灰度颜色
color: grayscale($main_color);
}
#page7{
//混合两种颜色
color: mix($main_color, $second_color);
}
经转换后的CSS代码为：
#page1 {
color: #4080bf;
}
#page2 {
color: #264d73;
}
#page3 {
color: #2966a3;
}
#page4 {
color: #3d668f;
}
#page5 {
color: #335599;
}
#page6 {
color: #666666;
}
#page7 {
color: #664c80;
}
【代码解析】在SASS代码里的相关位置已经对使用到的函数进行过了注释，这里不再重复说明。当需要对Ionic提供的默认颜色方案进行微调或是设计自己的APP应用的颜色方案时，读者可以考虑使用这些便捷函数。
4.1.7 引入文件@import
@import命令，用来插入外部SASS文件。Ionic代码库中路径为\项目目录\www\lib\ionic\scss\ionic.scss的文件的主要内容就是用于引入其他SASS模块文件，如：
@import
// Ionicons引入图标
"ionicons/ionicons.scss",
// Variables引入变量
"mixins",
"variables",
// Base引入基础模块
"reset",
"scaffolding",
"type",
……
【代码解析】请注意代码中引入文件名的区别，当SASS文件以_为前缀开头时，使用@import命令不需要写出这个_前缀和．scss的后缀。
4.1.8 条件语句@if和@else
条件语句是一般编程语言的基本设施，SASS有两个配套的@if和@else可以使用。Ionic代码库中路径为\项目目录\www\lib\ionic\scss\_mixins.scss的文件里也有多处用到了条件语句，如以下片段：
@mixin flex-wrap($value: nowrap) {
-webkit-flex-wrap: $value;
-moz-flex-wrap: $value;
@if $value == nowrap {
-ms-flex-wrap: none;
} @else {
-ms-flex-wrap: $value;
}
flex-wrap: $value;
}
【代码解析】由于IE浏览器的flex-wrap属性值与其他浏览器不一样，因此代码里通过条件语句进行了额外判断。