第一个模块 Sass入门篇

慕课网 Sass入门篇
慕课网 http://www.imooc.com/
w3cplus学习

Sass入门篇

Sass又名SCSS，是CSS预处理器

1. 安装
   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

2. 编译

• 单次手动编译

  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

3. 变量

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

4. 混合宏-声明混合宏

• 声明混合宏
  在 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');
}

5. 导入
   导入后合并成一个新的css文件
   @import '文件名'
6. 扩展、继承

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

7. 占位符
   %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

8. 运算
   font-size: 30px / 10px
9. 颜色
   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)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。