sass

学习目标(sass less)

熟悉sass的基本语法--八种核心的语法

1. 变量（普通变量、特殊变量）
2. 注释（单行注释，多行注释，重要注释）
3. 嵌套（选择器嵌套 &）
4. 混合（@mixin/@include）
5. 继承（@extend）
6. 局部文件（@import）
7. 循环( @for @each )
8. 算法(ceil,floor,random,abs......)

熟悉sass几种不同的编译方式

1. ruby命令行编译--不推荐
2. gulp编译
3. webpack编译

项目中可以酌情使用sass(sass非常适合大型的项目)

Sass介绍

css的预编译框架：世界上最成熟、最稳定、最强大的专业级CSS扩展语言！

CSS 不是一个编程语言，可以用它来开发网页样式，但是没有办法用它进行编程。SASS 的

出现，让 CSS 实现了通过代码编程来实现的方式。

SASS 是一种 CSS 开发工具，提供了许多便利的写法，让CSS 的处理实现了可编程处理。

https://www.sass.hk/

环境搭建及编译指令

安装 ruby(sass的依赖环境，必须安装), gem：ruby自带包管理工具

gem install sass（网络安装）

测试是否安装成功：ruby -v gem -v sass -v

sass的编译方式：webpack gulp ruby-sass koala软件 compass...

ruby命令行编译sass文件

进入sass文件目录 sass --watch sass文件的目录/. : 生成的css文件的目录/. --style expanded

一个.scss文件生成两个文件(.css--样式问题 .map--调试文件)

编译后输出格式

默认情况下，SASS 提供了四种格式的 CSS 输入，默认情况输出是嵌套格式

nested 嵌套（默认）

compact 紧凑 每个选择器代码在一行

expanded 扩展(完全格式化标准)

compressed 全部压缩成一行

sass 扩展名

sass 有两种后缀名文件：

第一种后缀名为 sass，不使用大括号和分号；

第二种就是使用的 scss 文件，这种和写的 css 文件格式差不多，使用大括号和分号。

在此也建议使用后缀名为 scss 的文件，以避免 sass 后缀名的严格格式要求而报错。

Sass-变量定义

变量：必须是$符号开头，后面紧跟变量名，变量名称和变量值之间要使用冒号:

进行分隔（参考 CSS 属性和值的设定语法） ，如果值后面加上[!default]就表示默认值。

引用变量的值，直接使用变量名称，即可引用定义的变量的值。

特殊变量：一般情况下，我们定义的变量都是属性值，可以直接使用，但是如果变量作

为属性或者其他的特殊情况下，必须使用#{$variable}的形式进行调用。

注释

SASS共有两种注释风格。

标准的CSS注释 /* comment */ ，会保留到编译后的文件。

单行注释 // comment，只保留在SASS源文件中，编译后被省略。

在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常 可以用于声明版权信息。

Sass-嵌套

选择器嵌套，在嵌套的过程中，如果需要用到父元素，在 SASS 中通过&符号引用父属性

嵌套属性——不常用

Sass-mixin函数

sass 中可以通过@mixin 声明混合（混合宏），可以传递参数，参数名称以$开始，多个参数之 间使用逗号分

隔，@mixin 的混合代码块由@include 来调用。

Sass-继承扩展--@extend

在 SASS 中，通过继承/扩展来减少重复代码，可以让一个选择器去继承另一个选择中所有

的样式，子类的样式(占位继承--%)。

Sass-导入（局部文件）

CSS 本身包含一个指令@import，但是 CSS 中的@import 每次执行都会发送一次新的请求都会消耗一定的资源。

当通过@import把sass样式分散到多个文件时，你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。对此，sass有一个特殊的约定来命名这些文件。

此约定即，sass局部文件的文件名以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线。

局部文件可以被多个不同的文件引用。当一些样式需要在多个页面甚至多个项目中使用时，这非常有用。在这种情况下，有时需要在你的样式表中对导入的样式稍作修改，sass有一个功能刚好可以解决这个问题，即默认变量值。

Sass-判断语句

@if 指令是 SASS 中的一个控制指令，用于在表达式满足条件（true）的时候输出指定的

样式，在不满足条件（false）或者表达式为 null 的情况下输出其他的样式

@if 条件 {

// 当条件为真时执行的样式

}

同样，也可以通过@else if 和@else 指令结合，进行多条件的判断

Sass-数组/map

map 就是列表项目中带名称的列表

$map：(key1:value1, key2:value2, key3:value3)

length($map):获取 map 中的元素对个数

map-get($map, key):获取$map 中名称为 key 的值

map-has-key($map, key):判断在$map 中是否包含指定的 key

Sass-循环语句--@for 指令在 SASS 中用于重复处理一组指令

有两种表现形式

@for $var from <开始值> through <结束值>

@for $var from to

to 和 through 都是表示一个区间，唯一的区别就是停止循环的地方不一样。$var 可以是

任意一个变量名称如$i，和是 SASS 表达式并且必须是整数

@each

Sass-function介绍

函数的功能主要是数据的运算，SASS 中可以将一些值交给函数进行处理，具体的处理方式

由定义的函数具体的设计确定。

@function 函数名称(参数列表){

// 数据处理

}