Sass学习笔记总结

6/15/2020 Sass

# 文章目录

# 一、什么是 CSS 预处器

CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。通俗的说,CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性,可以让你的 CSS 更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。

# 1.1 Sass 背景介绍

Sass 是对 CSS(层叠样式表)的语法的一种扩充,诞生于 2007 年,最早也是最成熟的一款 CSS 预处理器语言,它可以使用变量、常量、嵌套、混入、函数等功能,可以更有效有弹性的写出 CSS。Sass 最后还是会编译出合法的 CSS 让浏览器使用,也就是说它本身的语法并不太容易让浏览器识别,因为它不是标准的 CSS 格式,在它的语法内部可以使用动态变量等,所以它更像一种极简单的动态语言。

其实现在的 Sass 已经有了两套语法规则:一个依旧是用缩进作为分隔符来区分代码块的;另一套规则和 CSS 一样采用了大括号({})作为分隔符。后一种语法规则又名 SCSS,在 Sass3 之后的版本都支持这种语法规则。

注:Sass 官网地址:http://sass-lang.com

# 二、把 Sass 编译成 css

# 2.1 安装

安装推介 B 站良心 up 主:Sass windows 安装教程 (opens new window)

# 2.2 创建项目

  • 在你需要的地方创建项目,然后在编辑器中打开该目录

  • 这里我创建的项目是,ninghao-sass

  • ninghao-sass 目录下创建一个文件夹 sass,在该文件夹下新建文件 style.scss
    该目录用于存放项目所有的 sass 文件

  • ninghao-sass 目录下创建一个文件夹 css,在该文件夹下新建文件 style.scss
    该目录用于存储编译好的 css 文件
    在这里插入图片描述

  • 然后我们在 style.scss 中输入

    body {
      font-size: 15px;
    }
    
    1
    2
    3

# 2.3 打开命令行工具,把这个 sass 文件编译成普通的 css 文件

首先要进入到项目 目录下 也就是ninghao-sass
输入命令: sass (要编译的文件):(要输出的 css 文件)
sass sass/style.scss:css/style.css

  • 完成以后,css 文件夹下会出现编译好的 css 文件

# 2.4 自动编译

  • sass --watch (要监视的目录):(指定编译后的目录)
  • sass --watch sass:css
  • ctrl+c 可以取消自动编译

# 2.5 Sass 编译方式

  • 更改 Sass 编译方式的方法 --style [compact,expanded,compressed]
    更改编译方式命令:sass --watch sass:css --style compact

# 2.5.1nested 嵌套 (默认)

在这里插入图片描述

# 2.5.2compact 紧凑

在这里插入图片描述

# 2.5.3expanded 扩展

在这里插入图片描述

# 2.5.4compressed 压缩

在这里插入图片描述

# 三、Sass 与 less 的区别

  • 扩展名不一样
  • Sass 是 .sass
  • less 是 .scss (常用)

# 四、Scss 的变量

  • 使用 $符号+名称 可以定义变量
  • 变量里可以使用另外一个变量
    在这里插入图片描述

# 4.1 嵌套写法

  • 效果和注释掉的一模一样在这里插入图片描述
  • 不过如果在写伪类的时候这样写的话会出现下面这种情况
  • 可以看到编译过后的 css 文件会多出一个空格 在这里插入图片描述
  • 这个时候我们只需要在伪类标签前添加 & 符号即可
    在这里插入图片描述

# 4.2 引用父选择器

Scss

/* 嵌套时调用父类选择器*/
.nav {
  height: 100px;
  & &-item {
    font-size: 10px;
  }
}
1
2
3
4
5
6
7

Css

.nav .nav-item {
  font-size: 10px;
}
1
2
3

# 五、嵌套属性

对于同一个选择器下,相同的属性名称,我们可以提取出来。例如:

.nav {
  border: 1px solid #000;
  border-left: 0;
  border-right: 0;
}
1
2
3
4
5

可以写成

.nav {
  border:1px solid #000 {
    left: 0;
    right: 0;
  }
}
1
2
3
4
5
6

在这里插入图片描述
可以发现,编译后的 css 文件四一模一样的。

# 六、mixin (类似 JS 函数)

可以把它想象成是,有名字的、定义好的样式
可以在任何地方,重复使用,可以把它当作是 JS 的函数

你可以使用使用@符号定义它,例如:

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

mixin 可以嵌套使用变量,子样式、或者其他 mixin 例如:

@mixin alert {
  color: #8a8a8a;
  background-color: #fcf8e3;
  @include test;
  a {
    color: green($color: #000000);
    @include test;
  }
}
@mixin test {
  font-weight: 15px;
}

.alert-waring {
  @include alert;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  • 第一:我们首先定义了一个 alert,然后在里边添加了一些样式,
  • 第二:我们引入了另外的一个 mixin
  • 第三:我们在 alert 这个 mixin 下,又定义了一个 a 的样式。接下来我们看看会编译成什么样子
    在这里插入图片描述
    可以看到,效果是非常不错的,不仅嵌套的 test 编译出来了,而且子级的 a 样式,也成功编译。

# 6.1 darken (加深指定的颜色)

darken(参数 1,参数 2)

  • 参数 1:要加深的颜色
  • 参数 2:百分比加深多少
    在这里插入图片描述

# 6.2 调用 mixin

默认我们调用 mixin 的时候,参数需要对应。
但是当我们指定参数的时候,就可以不用对应。例如:
注意:指定参数的时候需要使用 : 号 来紧跟对应的值
在这里插入图片描述

# 七、@extend 继承或者扩展

在 Sass 中我们可以使用@extend 来减少重复的动作
在这里插入图片描述
继承相当于把继承类的类名换成当前类的类名。并且样式是继承类的样式。
简单来说,就是我把你的变成我们共同的。
当我们使用@extend 继承的时候,右边编译后的 css 文件会出现群组选择器。它们会同时拥有在群组选择器里边的样式。

# 八、 @import 与 Partials

Partials 文件名要以 _ (下划线开头)

那么如何引入 Partials 文件呢?

在文章开头,我们使用 @import + “文件名;” 的方式即可,
不需要写下划线,也不需要写扩展名,在同级目录下不需要写路径
在这里插入图片描述

# 九、注释

# 9.1、多行注释

  • 会在编译输出的结果中保留 但在压缩方式的编译情况下会去掉

    /*
    这是多行注释
    天王盖地虎
    */
    
    1
    2
    3
    4

# 9.2、单行注释

  • 不会出现在编译输出之后的文件里面。

    //这是单行注释
    
    1

# 9.3、强制注释

  • 这样注释的内容,会一直出现在 css 里边

    /*!这是强制注释*/
    
    1

    在这里插入图片描述

# 十、Data Type

在命令行中我们输入 sass -i
这是 sass 提供的交互功能,在这之后你输入的内容回车之后会立刻看到结果。

  • 判断数据的类型 可以使用 type-of()
  • 数据类型的数字还可以包含单位 例如:
    在这里插入图片描述
    当然还有很多其他用法 例如:
    在这里插入图片描述

# 十一、number 运算

在 sass 交互模式下,试一下数字的运算
在这里插入图片描述

# 十二、数字函数

  • abs() 取绝对值
  • round() 四舍五入
  • ceil() 向上取整
  • floor() 向下取整
  • percentage() 取百分比
  • min(1,2,3) 取最小的
  • max(1,2,3) 取最大的
    在这里插入图片描述
    在这里插入图片描述

# 十三、String 字符串

带引号:可以包含空格,和一些其他特殊字符
不带引号:不能有空格

+ 号 - 号 / 号 都可以连接字符串

>> "ning" + hao
"ninghao"
>> ning + "hao"
"ninghao"
1
2
3
4

在这里插入图片描述

# 十四、字符串函数

在 Sass 中有一些函数可以处理字符串类型的数据。

# 14.1 to-upper-case() 全部转为大写

在这里我们先定义了一个变量 $greeting,然后把该变量作为 to-upper-case()函数的参数,可以发现,该字符串的英文全部转化为大写了。

PS F:\Node.js\Node_project\ninghao-sass> sass -i
>> $greeting:"hello,world"
"hello,world"
>> $greeting
"hello,world"
>> to-upper-case($greeting)
"HELLO,WORLD"
>>
1
2
3
4
5
6
7
8

# 14.2 to-lower-case() 全部转为小写

用法同上。

PS F:\Node.js\Node_project\ninghao-sass> sass -i
>> $greeting:'Hello,World'
"Hello,World"
>> to-upper-case($greeting)
"HELLO,WORLD"
>> to-lower-case($greeting)
"hello,world"
>>
1
2
3
4
5
6
7
8

# 14.3 str-length() 返回字符串长度

用法同上。

>> str-length($greeting)
11
>>
1
2
3

# 14.4 str-index() 返回指定字符在字符串中首次出现的位置

注意:索引是从 1 开始的

>>$greeting: "Hello,World" > >> str-index($greeting, "world") null >> str-index(
    $greeting,
    "World"
  )
  7 >>;
1
2
3
4
5

# 14.5 str-insert() 插入字符串

语法: str-insert(要往那个字符串插入,插入的是什么,插入的位置)

>> str-insert($greeting,',Good morning',12)
"Hello,World,Good morning"
1
2

你也可以在 str-insert 函数中嵌套使用其他函数,比如:

>> str-insert($greeting,',Good morning',str-length($greeting)-5)
"Hello,Good morning,World"
>>
1
2
3

# 十五、颜色

在 css 里边表示颜色的方式有很多种,
例如:
#FF0000 16 进制
rgb(255,0,0) RGB 方式 红,绿,蓝
还有一些常用的字符类型的 比如 red black white blue

# 15.1 颜色函数 RGB 与 RGBA

rgb(红,绿,蓝)
rgba(红,绿,蓝,透明度(0-1));
a:完全透明-完全不透明

body {
  background-color: rgba(255, 255, 0, 1);
}
1
2
3

# 15.2 颜色函数 hsl 与 hsla

hsl 语法:色相,饱和度,明度
色相:0°-360°
饱和度:0-100%
明度:0-100%
hsla 语法:基本同上,和 rgba 差不多

# 15.3 颜色函数 adjust-hue

adjust-hue(),可以调整色相的值。
语法:adjust-hue(要调整的对象,参数)
在这里插入图片描述

# 15.4 颜色函数 lighten 与 darken

lighten 与 darken 可以改变颜色的明度
lighten 可以让颜色更白,越大越接近白色
darken 可以让颜色更黑,越大越接近黑色
在这里插入图片描述
在这里插入图片描述

# 15.5 颜色函数 saturate 与 desaturate

saturate 增加颜色的纯度,也就是饱和度
desaturate 减少颜色的纯度。
在这里插入图片描述
在这里插入图片描述

# 15.6 颜色函数 opacify 与 transparentize 透明度

opacify:增加不透明度
opacify 语法:opacify(要设置的对象,增加多少不透明度)
transparentize:减少不透明度
transparentize 语法:基本同上
在这里插入图片描述
在这里插入图片描述

# 15.7 list 列表类型数据

sass 里边的 list 可以使用空格、逗号、括号()、等分隔开
例如:

border:1px solid #000;
font-family: Courier, Lucida Console", monospace
padding:(5px 10px)(5px 0)
1
2
3

列表里边可以包含其他列表,比如:
padding 里边是一个列表包含了两个列表。

padding: 5px 10px, 5px 0;
1

# 15.8 列表函数

# 15.8.1 length() 返回列表项目个数

length()用于返回列表里有多少个项目:
例如:

psf: \Node.js\Node_project\study>sass-i>>length(5px 10px) 2 >> length(
    5px 10px 5px 0
  )
  4;
1
2
3
4

# 15.8.2 nth() 得到对应序号里边的数据

nth()用于得到指定位置的列表项目

psf: \Node.js\Node_project\study>sass-i>>nth(5px 10px, 2) 10px;
1

# 15.8.3 index()判断指定项目在列表里的位置

index() 用于判断指定项目在列表里的位置

>> index(1px solid red,solid)
2
1
2

# 15.8.4 append() 向列表追加项目

>> append(5px 10px,5px)
(5px 10px 5px)
1
2

这个函数还有第三个参数,用于指定列表的分隔符
例如:

>> append(5px 10px,5px,comma)
(5px, 10px, 5px)
1
2

# 15.8.5 join() 组合列表

join()用于组合列表

>> join(5px 10px,5px 5px)
(5px 10px 5px 5px)
1
2

这个函数也有第三个参数,用于指定分隔符 例如:

>> join(5px 10px,5px 5px,comma)
(5px, 10px, 5px, 5px)
1
2

# 十六、Map 与相关函数

Map 就是列表项目带名字的列表,例如:
$map: (key1: valuel, key2: value2, key3: value3)

# 16.1 定义 Map 类型数据

PS F:\Node.js\Node_project\ninghao-sass> sass -i
>> $colors:(light:#ffffff,dark:#000000)
(light: #ffffff, dark: #000000)
1
2
3

用在列表上边的函数同样可以处理 Map 类型的数据。
例如:
length() 查看变量中有,几个变量

>> length($colors)
2
1
2

# 16.2 map-get(参数 1,参数 2) 可以根据键来得到值

例如:

>> map-get($colors,dark)
#000000
1
2

# 16.3 map-keys(参数 1) 返回对象当中的所有 key

例如:

>> map-keys($colors)
("light", "dark")
1
2

# 16.4 map-values(参数 1) 返回对象当中所有的 value

例如:

>> map-values($colors)
(#ffffff, #000000)
1
2

# 16.5 map-has-key(参数 1,参数 2) 判断对象当中是否有指定的 key

例如:

>> map-has-key($colors,test)
false
>> map-has-key($colors,dark)
true
1
2
3
4

# 16.6map-merge(参数 1,参数 2) 把两个 Map 合并到一起

>> map-merge($colors,(light-gray:#e5e5e5))
(light: #ffffff, dark: #000000, light-gray: #e5e5e5)
1
2

合并之后我们可以把这个变量交给 $colors :

>>$colors: map-merge(
    $colors,
    (
      light-gray: #e5e5e5
    )
  ) (light: #ffffff, dark: #000000, light-gray: #e5e5e5) >> $colors (
    light: #ffffff,
    dark: #000000,
    light-gray: #e5e5e5
  ) >>;
1
2
3
4
5
6
7
8
9
10

# 16.7 map-remove(参数 1,参数 2,…) 移除指定的键值对

例如:

>> map-remove($colors,light,light-gray)
(dark: #000000)
>>
1
2
3

注意:移除过后很少 $colors 并没有减少,例如:

>> $colors
(light: #ffffff, dark: #000000, light-gray: #e5e5e5)
>> map-remove($colors,light,light-gray)
(dark: #000000)
>> $colors
(light: #ffffff, dark: #000000, light-gray: #e5e5e5)
1
2
3
4
5
6

可以看到$colors 还是原来的 3 个键值对
如果需要真正的移除需要对它赋值:
例如:

>>$colors(light: #ffffff, dark: #000000, light-gray: #e5e5e5)>>$colors: map-remove(
    $colors,
    light,
    light-gray
  ) (dark: #000000) >> $colors (dark: #000000);
1
2
3
4
5

# 十七、boolean 布尔值

取值: true false

psf: \Node.js\Node_project\ninghao-sass>sass-i>>5px > 3px true >> 5px > 10px
  false >> (5px < 10px) and (5px > 6px) false >> (5px < 10px) and (5px < 6px)
  true >> (5px < 10px) or (5px > 6px) true >> 5px > 3px true >> not (5px > 3px)
  false >> not (5px < 3px) true;
1
2
3
4

# 十八、Interpolation 可以把一个值插入到另一个值里边

简单点来说,就是在 特殊的地方(注释、属性名)等地方使用变量。
语法: #{} 花括号中间放变量名即可。
例如:
在这里插入图片描述

# 十九、流程控制语句

# 19.1 @if 判断

例如:
在这里插入图片描述

# 19.2 @for 循环

在 Sass 中,我们可以使用“@for”来实现循环操作。其中,Sass 中的@for 循环有 2 种方式。
语法:

方式1:@for $i from 开始值 through 结束值
方式2:@for $i from 开始值 to 结束值
1
2

说明:

这 2 种方式是相似的,唯一的区别是:方式 1 包括结束值,方式 2 不包括结束值。
其中“开始值”和“结束值”都是正整数

举例:
在这里插入图片描述
分析:

如果将“@for $i from 1 through 3”改为“@for $i from 1 to 3”,则编译出来的 CSS 代码如下:
在这里插入图片描述

# 19.3 @each in 循环

就是去遍历一个列表,然后从列表中取出对应值;
在这里插入图片描述

# 19.4 @while 循环

只要条件为真,就执行语句体
在这里插入图片描述

# 二十、用户自定义函数

语法:
@function 函数名称(参数 1,参数 2,…){

}

这里我们定义一个函数 color ,用于根据 map 的 key 返回 map 的 value
在这里插入图片描述

# 二十一、错误与警告

@warning :警告信息 错误信息只输出到命令提示行
@error :错误信息 会输出到命令行和 css 文件当中
例:@warning
在这里插入图片描述
例: @error
在这里插入图片描述

最后更新于: 2021年9月15日星期三晚上10点43分
Faster Than Light
Andreas Waldetoft / Mia Stegmar