sass.md

install

cnpm install sass
sass --version

cd Pro
mkdir sass_test  && cd sass_test

sass sass/style.scss:css/style.css

sass --watch sass:css

sass编译输出的css格式

• nested 嵌套 【默认】
• compact 紧凑
• expanded 扩展
• compressed 压缩

下面这种是sass默认输出的 nested 嵌套的格式

也可以是下面这种 compressed 压缩的格式

sass --watch sass:css --style compressed

.sass 和 .scss的区别

• .sass 缩进式语法

• .scss 【Sassy css，3.0之后的版本】

区别

• .sass

/* hello
world

// 你
   好

//---

@import base

//---

=alert
  color: red
  width: 100px
  
.alert-warning
  +alert

//---

ul
  font-size: 20px
  li
    list-style: none

• .scss

/* hello
world */

// 你
// 好

//---

@import "base"

//---

@mixin alert{
   color: red;
}

.alert-warning{
  @include: alert;
}

//---

ul{
  font-size: 20px;
  li{
    list-style: none;
  }
}

sass 为 css 提供的功能：变量 variables

可以定义一些变量，然后给它们一些特定的值，在创建样式的时候可以使用变量，作为样式的一个属性的值。这样如果想去改变样式的属性值的时候，只需要修改变量的值就行了。

sass中定义变量需要在变量前面加上$符

上面是自己定义了一个primary-color的变量，然后在div下面的box中去使用这个变量

在编译好的css中，使用这个变量的地方就会被替换成这个变量中的值

变量的值可以是数字，字符串， 颜色等。如果是字符串的话，就应该给这个变量用引号包起来。当然，变量也可以是多个值，变量的值中也可以去引用其他的变量👇

⚠️ 在定义变量的时候，变量名中间的可以使用 - 也可以使用 _，这两个可以交替使用，效果一样

嵌套用在样式的规则上

很多情况下创建样式的时候有些样式的选择器是重复出现的。比如👇

.nav{
  height: 100px
}

.nav ul{
  margin: 0;
}

.nav ul li{
  list-style: none;
}

这种用sass怎么写呢👇

调用父选择器

嵌套用在样式的属性上

mixin

用名字定义好的样式，可以在任何地方重复使用。有点像js中的函数，每一个mixin都有自己的名字，可以通过这个名字去调用它，定义mixin时还可以添加参数，这样可以让它使用起来更加灵活

@mixin 名字 (参数1,参数2,...){
  ...
}

在定义mixin的时候还可以使用嵌套，这时sass会将mixin中使用嵌套的部分解包出来

因为我们在alert-warning中使用了mixin，所以在解包的时候会使用这个选择器作为mixin中的a标签的样式的附选择器

mixin 参数

这上面写了一个darken()方法，它是用来做颜色加深用的，第一个参数是需要加深的颜色，第二个参数是需要加深的百分比

@extend

继承或扩展。就是让一个选择器去继承另一个选择器里面的所有样式

@import

在一个css文件中可以将其他的css文件引入，但是每次使用@import时，浏览器都会发出一个新的http请求去下载被导入的css文件。因为每次http请求都会消耗服务器资源，所以这样会让页面的加载变得更慢一些。sass扩展了@import的功能，可以让我们在一个sass文件中将其他的sass文件包含进来，sass会将它们编译成一个css文件，这样就可以 把一个项目需要的样式分割成很多小的部分，然后用倒入的方式，将这些小的部分包含到一个sass文件中。这些小的部分在sass中叫做partials，每一个partials就是一个sass文件，文件的名字的前面需要用下划线_开头，这样的话sass就知道这样的一个文件是一个partials，也就是项目的一部分，所以它就不会单独的去将这个partials文件编译成css。partials可以让项目文件模块化，并且有条理一些

• 先在sass/建立一个_base.scss的文件，然后在文件中写入内容👇

写完了可以看到对应的css目录下并没有生成对应的css文件，这是因为_base.scss这个文件并不是一个完整的.scss文件

• 然后需要在style.scss文件下通过@import来引入_base.scss

⚠️ 这个时候的引入不需要写_和后缀

数据类型

css属性值和sass变量的值可以分为几个不同的类型，比如有数字，字符串，颜色，列表等 。sass对不同数据的类型有不同的对待。比如可以使用+来连接两个字符串类型的数据等

sass -i

在终端输入这个命令可以看到sass运算之后的结果

number

数字函数

• abs()

  返回指定数字的绝对值

• round()

  四舍五入

• ceil()

  一直进位

• floor()

  退位

• percentage()

  百分数形式

• min/max

字符串

主要是连接符的用法

字符串函数

可以先定义一个变量 $greeting，它的值可以设置为“hello world”，这样在终端输入$greeting时就可以得到对应的值。也可以把这个$greeting变量作为函数的一个参数来使用👇

颜色函数

rgb (red（0-255）, green（0-255）, blue（0-255）)

sass关于颜色的函数有很多，先来看一下rgb函数。rgb()函数的参数对应红，绿，蓝这三类颜色rgb(red, green, blue)，它们的值是从0-255之间，或者也可以使用百分比的方式来表示颜色。对应的，还有一个rgba(red, green, blue, alpha)，这里的alpha指的是透明度

先来设置一个color ，在sass文件中设置为 rgb() 形式，只设置 red 为255，green 和 blue都为0。这个时候可以看到对应的css文件中解析出来的color为red。这是因为我们设置的是red饱和度为100%的纯红色，所以解析的时候就直接解析成了red（或者也可以将red对应的值设置为100%）

如果在颜色中更改green为100，这时解析出来的css文件就会改变

也可以将green改为255，这时解析出来的css文件颜色就变成了yellow。或者也可以将rgb()换乘rgba()，加入透明度选项，这时设置透明度为0.8的话，就看到解析出来的css文件也更改了

hsl【色相（0-360），饱和度（0-100%），明度（0-100%）】

上面的hsla()这个函数中的a也是透明度的意思，对应解析成的css文件中将hsla()解析成了rgba()

adjust-hue

这个函数可以调整颜色的hue，也就是色相的值

lighten & darken

这两个函数可以改变颜色的明度

可以看到对应解析出来的css文件将颜色换算成了16进制形式

saturate

这个函数可以增加颜色的纯度

一个是增加纯度，一个是降低纯度

transparentize & opacity

降低 / 增肌 透明度

list

列表类型的数据，在sass中，列表就是css声明属性的一串值。如 border: (1px solod red); 这种

list函数

• 想知道一个列表中包含多少个项目，可以用length()
• 得到对应序号的列表中的项目，可以用nth()，其中第一个参数为列表，第二个参数为列表项目的序号
• 判断列表中项目的序号，可以用index()，其中第一个参数为列表，第二个参数为要判断位置的列表的项目
• 往一个列表中添加新的项目，用append()，其中第一个参数为列表，第二个参数为要插入的新的项目，也可以有第三个参数，第三个参数为要返回列表的分隔符
• 要把两个列表组合为一个列表，用join()，前两个参数为要组合的列表，第三个参数为要返回列表的分隔符

map函数

列表项目带名字的列表。可以通过项目的名字找到它对应的值

$map: (key1: value1, key2: value2)

• 首先定义一个map类型的数据
• length()：查看map数据的项目数
• map-get()：根据项目的名字得到对应的值
• map-keys：得到map中的所有项目的key
• map-value：得到map中的所有项目的value
• map-has-key()： 判断map中是否有指定的key的项目
• map-merge()：合并两个map。也可以将合并后的值重新赋给$colors
• map-remove()：map中移除一个项目

interpolation

把一个值插入到另一个值中。在sass 中，interpolation可以用这样的形式，将变量或者表达式放到一组带# 的 { }中，使用interpolation 语法可以在样式的选择器或者属性上 使用变量或者表达式

• 先定义一个version ，如果要在下面的注释中用这个version的话，就需要写成#{version}这样的形式
• 也可以在选择器中进行运用👇

control directive

在定义比较复杂的mixin或者是函数的时候，可能需要用到一些控制的指令，比如说判断，当满足条件的时候，才会去进行下一步；或者可能需要循环的去输出一些样式等等，下面来具体看看…

@if

@if <条件> {
  ...
}

@for

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

这里的 through 也可以换成 to ，区别就是停止循环的地方不太一样

将 through 换成 to 之后，可以看到结果中不会包含结束值的那次循环

@each

想根据列表中的每隔项目去生成特定的样式，这时就可以使用@each了

@each $var in $list{
  ...
}

@while

@while <条件> {
  ...
}

后面加了一个 $i: $i - 2;是为了让循环能够结束，而不是一直执行

用户自定义函数

函数的功能就是可以将一些值交给函数去处理，然后返回处理后的结果

用户除了使用自带函数之外还可以自定义函数👇

@function 名称(参数1,参数2){
  ...
}

警告或错误

在我们自己设置的函数或者mixin中，可以包含一些警告或提示的信息，这样用户在错误的使用时可以看到这些提醒

将@warn 换成 @error 后可以看到在编译成的css文件中会出现相关的错误信息