SASS入门

SASS是一种对CSS进行了扩充的开发工具，它提供了许多便利的写法，使得CSS的开发变得简单和可维护，大大节省了样式设计者尤其是有编程背景的样式设计者的时间。符合SASS语法的文件就是普通的文本文件，里面可以直接使用CSS语法。SASS文件后缀名是.scss

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

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

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属性名也可以嵌套生成，如：

div.container {
  border: {
    color: green;
  }
  border-left: {
    color: red;
  }
}

经转换后的CSS代码为：

div.container {
  border-color: green;
  border-left-color: red;
}

在嵌套的代码块内，可以使用&占位符表示引用父元素。如：

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

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.继承@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类或子元素声明里，这样的代码结构可阅读可维护性明显更佳。

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

【代码解析】如代码所示，生成的第一个元素在引入时使用了默认参数值，而第二个在引入时使用了指定参数值。

下为其中一小段代码片段：

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

【代码解析】这样为针对两种不同的浏览器分别定义元素的四个角的圆角半径提供了简单的方式。

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代码里的相关位置已经对使用到的函数进行过了注释，这里不再重复说明。当需要对提供的默认颜色方案进行微调或是设计自己的APP应用的颜色方案时，读者可以考虑使用这些便捷函数。

7.引入文件@import

@import
  // Ionicons引入图标
  "ionicons/ionicons.scss",

  // Variables引入变量
  "mixins",
  "variables",

  // Base引入基础模块
  "reset",
  "scaffolding",
  "type",
……

【代码解析】请注意代码中引入文件名的区别，当SASS文件以为前缀开头时，使用@import命令不需要写出这个前缀和.scss的后缀。

8.条件语句@if和@else

@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属性值与其他浏览器不一样，因此代码里通过条件语句进行了额外判断。