【web前端】Sass、gulp

Sass

学习目标：
1.Sass的简介
2.sass的安装环境
3.sass的语法格式及编译调试
4.sass的基本特性-基础

一、什么是CSS预处理器？

• 定义：
  CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。
  通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
  其它 CSS 预处理器语言：
• CSS 预处理器技术已经非常的成熟，而且也涌现出了很多种不同的 CSS 预处理器语言，比如：
  Sass（SCSS） Turbine
  LESS Swithch CSS
  Stylus CSS Cacheer
  DT CSS
  https://www.sass.hk/docs/

二、什么是sass？

Sass 官网上是这样描述 Sass 的：
Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。
Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。

三、sass和scss的区别？

• Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass。
• 两者之间不同之处有以下两点：
  • 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
  • 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

四、sass安装（windows版本）

• 4.1
  在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包，大家可以到 Ruby 的官网（http://rubyinstaller.org/downloads）下载对应需要的 Ruby 版本。
  Ruby 安装文件下载好后，可以按应用软件安装步骤进行安装 Ruby。在安装过程中，个人建议将其安装在 C 盘下，在安装过程中选择第二个选项（不选中，就会出现编译时找不到Ruby环境的情况）

• 4.2
  Ruby 安装完成后，在开始菜单中找到新安装的 Ruby，并启动 Ruby 的 Command 控制面板，如下图所示：

当你的电脑中安装好 Ruby 之后，接下来就可以安装 Sass 了。同样的在windows下安装 Sass 有多种方法。但这几种方法都是非常的简单，只需要在你的命令终端输入一行命令即可。
1、通过命令安装 Sass
打开电脑的命令终端，输入下面的命令：
gem install sass
提醒一下，在使用 Mac 的同学，可能需要在上面的命令前加上"sudo"，才能正常安装：
sudo gem install sass
2、本地安装Sass
可以到 Rubygems(http://rubygems.org/) 网站上将 Sass 的安装包（http://rubygems.org/gems/sass）下载下来，然后在命令终端输入：
gem install <把下载的安装包拖到这里>

• 4.3
  由于国内网络原因（你懂的），导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过gem sources命令来配置源，先移除默认的https://rubygems.org源，然后添加淘宝的源 https://gems.ruby-china.com，然后查看下当前使用的源是哪个，如果是淘宝的，则表示可以输入sass安装命令gem install sass了

• 4.4sass的语法格式
  这里说的 Sass 语法是 Sass 的最初语法格式，他是通过 tab 键控制缩进的一种语法规则，而且这种缩进要求非常严格。另外其不带有任何的分号和大括号。常常把这种格式称为 Sass 老版本，其文件名以“.sass”为扩展名。

在整个 Sass 代码中，我们没看到类似 CSS 中的大括号和分号。
注：这种语法格式对于前端人员都不太容易接受，而且容易出错。

五、sass命令编译

一些Linux命令
cd 路径 进入某一个目录
在windows下，先切换盘符 D: C:
dir windows查看当前目录下的文件
小技巧 写名称的一部分+tab 自动补齐
cd … 返回上一级目录
命令编译是指使用你电脑中的命令终端，通过输入 Sass 指令来编译 Sass。这种编译方式是最直接也是最简单的一种方式。因为只需要在你的命令终端输入：

单文件编译：
sass 源文件路径:目的文件路径
【注】上述两个路径都是相对于当前所处文件夹的路径

缺点及解决方法：
在实际编译过程中，你会发现上面的命令，只能一次性编译。每次个性保存“.scss”文件之后，都得重新执行一次这样的命令。如此操作太麻烦，其实还有一种方法，就是在编译 Sass 时，开启“watch”功能，这样只要你的代码进行任保修改，都能自动监测到代码的变化，并且给你直接编译出来：
sass --watch 源文件路径:目的文件路径
【注】ctrl+C可以终止监听，如果这里失效，也没有关系，我们在后续会教给大家别的编译方式。

六、sass不同样式风格的输出方法

众所周知，每个人编写的 CSS 样式风格都不一样，有的喜欢将所有样式代码都写在同一行，而有的喜欢将样式分行书写。在 Sass 中编译出来的样式风格也可以按不同的样式风格显示。其主要包括以下几种样式风格：

嵌套输出方式 nested (sass --watch test.scss:test.css --style nested)
展开输出方式 expanded (sass --watch test.scss:test.css --style expanded)
紧凑输出方式 compact (sass --watch test.scss:test.css --style compact) 单行CSS样式
压缩输出方式 compressed (sass --watch test.scss:test.css --style compressed) 去掉注释及空格压缩

开发版本(可阅读性要非常好，严格代码缩进)
.css
.js
上线版本/生产环境(压缩版本)
.min.css
.min.js

七、sass语法

• 7.1声明变量-普通变量-默认变量-特殊变量-全局变量
  定义变量的语法：

普通变量
定义之后可以在全局范围内使用。
KaTeX parse error: Expected '}', got 'EOF' at end of input: … font-size:fontSize;
}

默认变量
sass 的默认变量仅需要在值后面加上 !default 即可。
$baseLineHeight:1.5 !default;
body{
line-height: $baseLineHeight;
}
sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要重新声明下变量即可。

全局变量——在变量的后面加上[!global]即可声明全局变量。sass 规划是 3.4 以后的版本中就会增加这个功能。

特殊变量：一般情况下，我们定义的变量都是属性值，可以直接使用，但是如果变量作
为属性或者其他的特殊情况下，必须使用#{ KaTeX parse error: Expected 'EOF', got '}' at position 9: variable}̲的形式进行调用。 #{ variable} 就是取值的一种特殊形式，符合特殊用法。

• 7.2sass嵌套-选择器嵌套
  SASS 中的嵌套主要说的是选择器嵌套和属性嵌套两种方式，正常项目中通常使用的都是选
  择器嵌套方案
  【注】在嵌套的过程中，如果需要用到父元素，在 SASS 中通过&符号引用父属性

• 7.3sass嵌套-属性嵌套
  嵌套属性——不常用
  所谓属性嵌套，是指某些属性拥有同样的单词开头，如：wborder-color
  都是以 border 开头的，所以就出现了属性嵌套语法

• 7.4sass混合-Mixin
  sass 中可以通过@mixin 声明混合，可以传递参数，参数名称以$开始，多个参数之间使用
  逗号分隔，@mixin 的混合代码块由@include 来调用

无参数混合

• 7.5sass继承拓展-@extend
  在 SASS 中，通过继承/扩展来减少重复代码，可以让一个选择器去继承另一个选择中所有
  的样式。
  继承某个样式的同时，也会继承样式的扩展。

• 7.6Partitials和@import
  Partials 是用来定义公共样式或者组件的样式的，专门用于被其他的 scss 文件 import
  进行使用的
  在 SCSS 文件中引入指令@import 在引入 Partials 文件时，不需要添加下划线。详细参
  考案例代码。

声明公共样式，公共样式文件要以 _

• 7.7sass注释
  SASS 中提供了三种注释
  多行注释 在编译输出的 css 文件中会保留，压缩输出格式中不会保留 --style compressed
  /*
• 多行注释
  */

单行注释 在输出 css 文件时不保留
// 单行注释

强制注释 在多行注释的开头，添加感叹号！表示强制保留
/*!

• 强制注释
  */

• 7.8sass数据类型
  Sass 支持7种主要的数据类型

数字(例如： 1.2, 13, 10px)
字符串(例如：“foo”, ‘bar’, baz)
颜色(例如：blue, #04a3f9, rgba(255, 0, 0, 0.5))
布尔值(例如： true, false)
空值(例如： null)
列表(list)，用空格或逗号分隔 (例如：c 1.5em 1em 0 2em, Helvetica, Arial,
sans-serif)
映射(例如： (key1: value1, key2: value2)) map映射 键->值

• 7.9数字&数字函数
  在 SASS 中可以对数字进行运算
  同时 SASS 支持数字函数的运算

• 7.10sass字符串
  SASS 支持字符串的操作
  同时 SASS 对字符串的操作有一些封装的函数的支持，方便快捷的处理字符串操作。
  更多操作请参考官方文档。 http://sass.bootcss.com/docs/sass-reference/

• 7.11sass颜色
  颜色的表示有很多种

十六进制 Hex：#ff0000 等等
RGB:rgb(255, 0, 0)等等
字符串：red, blue, green 等等
等等… …
【注】SASS 支持所有这些颜色的表示方式 相信大家对这些颜色的表示方式应该非常熟悉了
颜色函数——rgb & rgba
通过 rgb()的形式进行颜色的控制【红、绿、蓝】

• 7.12sass列表-list
  list 表示列表类型的值
  在 CSS 中就是表示属性的一串值
  列表中的值可以使用空格或者逗号分隔，如

border:#ccc solid 1px; 值就是列表
font-family:Courier, “Lucida Console”, monospace; 值也是列表
列表中可以包含其他的列表，如：
padding:10px 5px, 5px 5px; 值的列表中有两个列表，用逗号分隔
padding:(10px 5px) (5px 5px);可以用括号分开，编译成 css 时会去掉这些括号

• 列表函数
  SASS 中的列表相当于其他语言中的数组，SASS 也提供了一些函数方便列表的操作
  length:获取列表长度
  nth:获取指定位置的列表项
  index:获取某个元素在列表中的位置，如果没有查询到返回 null
  append:给指定的第一个列表添加一个列表项
  join:合并列表

• 7.13sass映射map
  map 就是列表项目中带名称的列表

$map：(key1:value1, key2:value2, key3:value3)
$var(key1:value1,key2:value2..):声明一个Maplength($map):获取 map 中的元素对个数
map-get($map,key):获取$map 中名称为 key 的值
map-keys($map):获取指定$map 中所有的 key
map-values($map):获取指定$map 中所有的 value
map-has-key($map,key):判断在$map 中是否包含指定的 key
map-merge($map1, $map2):将$map1 和$map2合并在一起map-remove($map, key):将指定名称的 key 从$map 中移除

• 7.14sass布尔值
  SASS 中的布尔值，跟其他语言一样，都是用来表示真/假的逻辑判断的。
  取值：true/false,sass 中可以使用比较运算符，返回的就是布尔值

比较运算符

、 >=、 <、 <=、 !=、 ==
逻辑运算符
and、or、not

• 7.15控制指令-control Directives
  SASS 中为了更加方便的处理一些带有逻辑性的样式，如满足某些条件的时候使用指定的样
  式，或者根据指定列表中的项目循环输出样式等，提供了一些控制指令进行处理

@if：条件控制指令
@for:循环指令
@each:循环指令
@while:循环指令
@if 指令是 SASS 中的一个控制指令，用于在表达式满足条件（true）的时候输出指定的
样式，在不满足条件（false）或者表达式为 null 的情况下输出其他的样式
【注】同样，也可以通过@else if 和@else 指令结合，进行多条件的判断

• 7.16sass-@for
  @for 指令在 SASS 中用于重复处理一组指令
  有两种表现形式

@for $var from <开始值> l <结束值>
@for $var from to
<1> to 和 through 都是表示一个区间
<2> 唯一的区别就是停止循环的地方不一样
<3> $var可以是任意一个变量名称如$i
<5> 和是 SASS 表达式并且必须是整数

• 7.17sass-@each
  @each 在 Sass 中主要被用来进行列表或者映射数据的循环
  主要表示形式：@each $var in
  $var 可以是任意变量名称，是 SASS 表达式并且必须是 List

• 7.18sass-@while
  @while 指令在 SASS 中用于循环重复处理样式，直到@while 表达式返回 false

• 7.19sass用户自定义函数-function
  函数的功能主要是数据的运算，SASS 中可以将一些值交给函数进行处理，具体的处理方式
  由定义的函数具体的设计确定。
  @function 函数名称(参数列表){
  // 数据处理
  }

• 7.20sass警告 VS 错误
  在自己设计的函数或者 Mixin 中，可以包含一些警告或者错误提示信息，用户在错误使用
  函数或者 mixin 时，就会看到这样的错误提示。

@warn:警告信息——会出现在命令行窗口中，编译提示
@error:错误信息——会出现在编译后的 css 文件中，错误提示
@warn message; 警告信息，警告信息一般会在执行 scss 程序生成 css 时触发，所以
出现在命令行中。
@error message; 错误信息，错误信息直接显示在编译的 css 文件中。

八、sass-总结

在时间充裕的情况下，最后页面，使用 SASS 完成样式处理。
【注】建scss文件，最后编译成css文件引入。

gulp