Sass入门篇

Sass又名SCSS，是CSS预处理器

安装
sass是基于Ruby。
方式一、 Windows 平台下安装
在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包，大家可以到 Ruby 的官网（http://rubyinstaller.org/downloads）下载对应需要的 Ruby 版本。

Ruby 安装文件下载好后，可以按应用软件安装步骤进行安装 Ruby。在安装过程中，个人建议将其安装在 C 盘下，在安装过程中选择第二个选项（不选中，就会出现编译时找不到Ruby环境的情况），如下图所示：
Ruby 安装完成后，在开始菜单中找到新安装的 Ruby，并启动 Ruby 的 Command 控制面板，如下图所示：

当你的电脑中安装好 Ruby 之后，接下来就可以安装 Sass 了。同样的在windows下安装 Sass 有多种方法。但这几种方法都是非常的简单，只需要在你的命令终端输入一行命令即可。
通过命令安装 Sass
打开电脑的命令终端，输入下面的命令：
```
gem install sass
```
提醒一下，在使用 Mac 的同学，可能需要在上面的命令前加上"sudo"，才能正常安装：
```
sudo gem install sass
```

方式二、ubuntu16.04 安装sass

sudo apt-get install ruby
sudo gem install sass

编译

单次手动编译
```
sass sass/style.scss:css/style.css
```

自动监测编译

sass --watch sass/style.scss:css/style.css
sass --watch sass/:css

输出方式
嵌套输出方式 nested
展开输出方式 expanded
紧凑输出方式 compact
压缩输出方式 compressed
```
//以压缩方式输出
sass --watch sass/style.scss:css/style.css -t compressed
sass --watch sass/:css -t compressed
```
编译参数如图：

编译参数.jpg

变量

声明
Sass 的变量包括三个部分：
声明变量的符号“$”
变量名称
赋予变量的值
如：$color: #ccc;
使用
调用处直接使用变量就可以！
如：color: $color;

混合宏-声明混合宏

声明混合宏
在 Sass 中，使用@mixin来声明一个混合宏

//不带参数的混合宏
@mixin border-radius{
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
//带参数的混合宏
@mixin box-shadow($a, $b, $c, $d, $rgb){
  -webkit-box-shadow: $a $b $c $d $rgb;
  box-shadow: $a $b $c $d $rgb;
}

调用
使用 @include 混合宏名

.btn{
  @include border-radius;
}
.box{
  @include box-shadow(1px,1px,15px,5px,'red');
}

导入
导入后合并成一个新的css文件
@import '文件名'

扩展、继承

.btn{
  border:1px solid #eee;
  border-radius:5px;
}

.btn-primary{
  @extend .btn;
  color: darken(#908920, 6.5%);
}

.btn-info{
  @extend .btn;
  color: darken(#402132, 6.5%);
}

占位符
%placeholder

%btn{
  color:red;
  border:2px solid red;
  padding:10px;
}

.btn-primary{
  @extend %btn;
  color: blue;
}

.btn-success{
  @extend %btn;
  color: green;
}

混合宏vs继承vs占位符.jpg

运算
font-size: 30px / 10px
颜色
sass中集成了大量的颜色函数，让变换颜色更加简单。
color: darken(red, 6.5%);
颜色参考

在Sass中提供了一系列有关于HSL的颜色函数，以供大家使用，其中常用的有
saturation、lightness、adjust-hue、lighten、darken等等。
接下来我们先来了解一下HSL颜色函数包括哪些具体的函数，所起的作用是什么。

hsl($hue,$saturation,$lightness)：通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色；
hsla($hue,$saturation,$lightness,$alpha)：通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色；
hue($color)：从一个颜色中获取色相（hue）值；
saturation($color)：从一个颜色中获取饱和度（saturation）值；
lightness($color)：从一个颜色中获取亮度（lightness）值；
adjust-hue($color,$degrees)：通过改变一个颜色的色相值，创建一个新的颜色；
lighten($color,$amount)：通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色；
darken($color,$amount)：通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色；
saturate($color,$amount)：通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色
desaturate($color,$amount)：通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色；
grayscale($color)：将一个颜色变成灰色，相当于desaturate($color,100%);
complement($color)：返回一个补充色，相当于adjust-hue($color,180deg);
invert($color)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。