什么是CSS预处理器

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作

通俗讲，CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题

CSS预处理器种类繁多，最优秀的有 Sass、Less、Stylus

什么是Sass

Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。

Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表

Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言

Sass 和 SCSS 有什么区别

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass

不同之处有：

1. 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名

2. 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

Sass样式

Scss样式

在书写 Sass 时不带有大括号和分号，其主要是依靠严格的缩进方式来控制的

SCSS 和 CSS 写法无差别，这也是 Sass 后来越来越受大众喜欢原因之一

Sass安装（windows）

1. 在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包, Ruby 的官网（http://rubyinstaller.org/downloads）

2. 打开Ruby的命令终端   gem install sass

3. 查测 Sass 及更新 

    sass -v

    gem update sass

4. 卸载  gem uninstall sass

Sass 的编译方法

一.命令编译

    1> 单文件编译

    sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css     

    2> 多文件编译

    sass sass/:css/      #将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件，并且将这些 CSS 文件都放在项目中“css”文件夹中

   3> 改善：开启“watch”功能，这样只要你的代码进行任保修改，都能自动监测到代码的变化，并且给你直接编译出来

    sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

二. GUI工具编译

    1> 较为流行的主要有：

    Koala (http://koala-app.com/)

    Compass.app（http://compass.kkbox.com/）

    Scout（http://mhs.github.io/scout-app/）

    CodeKit（https://incident57.com/codekit/index.html）

    Prepros（https://prepros.io/）

    2>推荐使用

    Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)

    CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)

三. 自动化编译

    1. Grunt 

    Grunt-beginner前端自动化工具 【http://www.imooc.com/learn/30】

    2. Gulp    

四. 常见的编译错误

    1. 字符编译

    最为常见的一个错误就是字符编译引起的。在Sass的编译的过程中，是不是支持“GBK”编码的。所以在创建 Sass 文件时，就需要将文件编码设置为“utf-8”

    2.  中文字符

    路径中的中文字符引起的。建议在项目中文件命名或者文件目录命名不要使用中文字符

Sass 输出样式风格

一. 嵌套输出方式 nested

nested方式

    在编译的时候带上参数“ --style nested”:    sass --watch test.scss:test.css--style nested

二. 展开输出方式 expanded

expanded

    sass --watch test.scss:test.css--style expanded

三. 紧凑输出方式 compact

compact

      sass --watch test.scss:test.css--style compact

四. 压缩输出方式 compressed

单行 CSS 样式

    sass --watch test.scss:test.css--style compact

Sass 基础

一.声明变量

声明变量 以“$”开头

例如：$btn-primary-color : #fff !default;  #后面加上!default则表示默认值

普通变量:定义之后可以在全局范围内使用

 $fontSize: 12px;

body{    font-size:$fontSize;}

默认变量:在值后面加上 !default 

$baseLineHeight:1.5!default;

body{ line-height: $baseLineHeight; }

全局变量：在选择器、函数、混合宏...的外面定义的变量为全局变量

全局变量就是定义在元素外面的变量

sass 在线编辑器网：http://sassmeister.com/

二. Sass 的嵌套

1> 选择器嵌套

 选择器嵌套

2> 属性嵌套

border属性嵌套

3> 伪类嵌套

伪类嵌套和属性嵌套非常类似，只不过他需要借助`&`符号一起配合使用

三. 混合宏

当你的样式变得越来越复杂，需要重复使用大段的样式时,Sass 中的混合宏就会变得非常有用

1> 声明宏

使用“@mixin”来声明一个混合宏

1）不带参数混合宏

例如： @mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px;}

@mixin 是用来声明混合宏的关键词 

border-radius 是混合宏的名称， 大括号里面是复用的样式代码

2）带参数混合宏

@mixin border-radius($radius:5px){ -webkit-border-radius: $radius; border-radius: $radius;}

3）复杂的混合宏

box-shadow 的混合宏，带有多个参数，这个时候可以使用“ … ”来替代

当 $shadow 的参数数量值大于或等于“ 1 ”时，表示有多个阴影值，反之调用默认的参数值“ 0 0 4px rgba(0,0,0,.3) ”

2> 调用混合宏

使用 "@include" 调用声明好的混合宏

在一个按钮中要调用定义好的混合宏“border-radius”  

传一个不带值的参数

传一个带值的参数

传多个参数

3> 混合宏的不足

优点：复用重复代码块

缺点：会生成冗余的代码块 ，不能智能的将相同的样式代码块合并在一起

四. 扩展、继承

通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承

在 Sass 中的继承，编译出来的 CSS 会将选择器合并在一起，形成组合选择器

缺点：不能传变量参数

优点：使用继承后，编译出来的 CSS 会将使用继承的代码块合并到一起，通过组合选择器的方式向大家展现，编译出来的代码比混合宏要干净的多

五. 占位符 %placeholder

Sass 中的占位符 %placeholder 功能是一个很强大，很实用的一个功能，可以取代以前 CSS 中的基类造成的代码冗余的情形，因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码

通过 @extend 调用的占位符编译出来的代码会将相同的代码合并在一起

六. 什么时候用混合宏，什么时候用继承，什么时候使用占位符？

1. 如果代码块中涉及到变量，建议使用混合宏来创建相同的代码块

2. 如果代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承

3. 占位符编译出来的 CSS 代码和使用继承基本上是相同，只是不会在代码中生成占位符 mt 的选择器。

占位符和继承的主要区别：

    “占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；

    继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中

三种方式的区别

七. 插值 #{}

使用 CSS 预处理器语言的一个主要原因是想使用 Sass 获得一个更好的结构体系

编写更干净的、高效的和面向对象的 CSS 就需要 Sass 中的插值(Interpolation)

@each循环

构建一个选择器

动态的插入 .class 和 %placeholder

注释：

    1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ”

    2、类似 JavaScript 的注释方式，使用“//”

区别： 前者会在编译出来的 CSS 显示，后者在编译出来的 CSS 中不会显示

注释的差别

八. [Sass]数据类型

1. 数字: 如，1、 2、 13、 10px；

2. 字符串：有引号字符串或无引号字符串，如，"foo"、 'bar'、 baz；

    有引号字符串 (quoted strings)，如 "Lucida Grande" 、'http://sass-lang.com'

    无引号字符串 (unquoted strings)，如 sans-serifbold

使用 #{ }插值语句 (interpolation) 时，有引号字符串将被编译为无引号字符串

    注意：当 deprecated = property syntax 时，所有的字符串都将被编译为无引号字符串，不论是否使用了引号

3. 颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；

4. 布尔型：如，true、 false；

5. 空值：如，null；

6. 值列表：用空格或者逗号分开，如，margin:10px 15px 0 0；

    值列表功能：

    1.nth函数（nth function） 可以直接访问值列表中的某一项；

    2.join函数（join function） 可以将多个值列表连结在一起；

    3.append函数（append function） 可以在值列表中添加值；

    4.@each规则（@each rule） 则能够给值列表中的每个项目添加样式

Sass运算

一、加法、减法、乘法、除法

Sass的控制命令

一、@if

 @if 可以配合 @else if 和 @else 一起使用

通过 @if...@else... 来判断传进参数的值来控制 display 的值

二、for循环

@for 循环中有两种方式：

    @for $i from <start> through <end>     关键字 through 表示包括 end 这个数

    @for $i from <start> to <end>     关键字to 不包括 end 这个数

through和to的区别

网格系统生成各个格子

三、@while循环

@while的例子

四、@each

@each 循环就是去遍历一个列表，然后从列表中取出对应的值

@each $var in <list>

Sass的函数

一、字符串函数

    字符串函数是用来处理字符串的函数

    1> unquote、quote

       unquote($string)：删除字符串中的引号；

       quote($string)：给字符串添加引号；

    使用 quote() 函数只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起，否则编译报错

    使用 quote() 碰到特殊符号，比如： !、?、> 等，除中折号 - 和 下划线_ 都需要使用双引号括起，否则编译报错

    2> To-upper-case()、To-lower-case()

    to-upper-case() 函数 将字符串小写字母转换成大写字母

    To-lower-case() 函数 将字符串转换成小写字母

二、数字函数

数字函数提要针对数字方面提供一系列的函数功能

    1> percentage($value)：将一个不带单位的数转换成百分比值；

    2> round($value)：将数值四舍五入，转换成一个最接近的整数；

    3> ceil($value)：将大于自己的小数转换成下一位整数；

    4> floor($value)：将一个数去除他的小数部分；

    5> abs($value)：返回一个数的绝对值；

    6> min($numbers…)：找出几个数值之间的最小值；

    7> max($numbers…)：找出几个数值之间的最大值；

    8> random(): 获取随机数

数字函数的使用

三、列表函数

    在 Sass 中，第一个值就是1，第二个值就是 2

     length($list)：返回一个列表的长度值；

     nth($list, $n)：返回一个列表中指定的某个标签值   $n>0

     join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表；

     append($list1, $val, [$separator])：将某个值放在列表的最后；

     zip($lists…)：将几个列表结合成一个多维的列表；

     index($list, $value)：返回一个值在列表中的位置值   没有找到返回false

使用

四、颜色函数

    1> RGB()颜色函数  提供六种函数

    rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色；

    rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色；

    red($color)：从一个颜色中获取其中红色值；

    green($color)：从一个颜色中获取其中绿色值；

    blue($color)：从一个颜色中获取其中蓝色值；

    mix($color-1,$color-2,[$weight])：把两种颜色混合在一起

颜色函数

    2> 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)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变;

例子

    3> Opacity函数

     alpha($color) /opacity($color)：获取颜色透明度值；

     rgba($color, $alpha)：改变颜色的透明度值；

     opacify($color, $amount) / fade-in($color, $amount)：使颜色更不透明；

     transparentize($color, $amount) / fade-out($color, $amount)：使颜色更加透明

实例

五、Introspection 函数

    type-of($value)：返回一个值的类型   返回值 number 、string 、bool 、color

    unit($number)：返回一个值的单位

    unitless($number)：判断一个值是否带有单位  不带单位返回 true 否则返回false：

    comparable($number-1, $number-2)：判断两个值是否可以做加、减和合并  如果可以返回 true，否则返回false

例子

六、三元函数

Miscellaneous  三元条件函数  

if($condition,$if-true,$if-false)

 $condition 条件成立时，返回的值为 $if-true，否则返回的是 $if-false 值

七、Map

Sass 的 map 常常被称为数据地图

$map: (

    key1: value1,

    key2: (

        key-1: value-1,

        key-2: value-2

    )

);

 map 自带函数：

map-get($map,$key)：根据给定的 key 值，返回 map 中相关的值。

map-merge($map1,$map2)：将两个 map 合并成一个新的 map。

map-remove($map,$key)：从 map 中删除一个 key，返回一个新 map。

map-keys($map)：返回 map 中所有的 key。

map-values($map)：返回 map 中所有的 value。

map-has-key($map,$key)：根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。

keywords($args)：返回一个函数的参数，这个参数可以动态的设置 key 和 value

实例

Sass 的 @ 规则

一、@import

@import  能够引入 SCSS 和 Sass 文件

@import 根据文件名引入

    @import "foo";

    @import "rounded-corners", "text-shadow"; //引入多个文件

    一个文件叫 colors.scss ,@import "_colors" ,不会生成 colors.css

    一个文件叫 _colors.scss ,@import "colors" ,不会生成 _colors.css

注意，在同一个目录不能同时存在带下划线和不带下划线的同名文件。 例如 _colors.scss与 colors.scss 不能并存

二、@media  冒泡

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面  

三、@extend  扩展选择器或占位符

多个扩展和 扩展单一选择器

四、@at-root  跳出根元素

当你选择器嵌套多层之后，想让某个选择器跳出 就可以使用 @at-root

五、@debug 、@warn   调试Sass

调试

六、@error

@error 和 @warn、@debug 功能是如出一辙