【笔记】Sass学习笔记

发表于 更新于 阅读次数：

前言

Sass（英文全称：Syntactically Awesome Stylesheets）是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。在开发最初版本之后，Weizenbaum和Chris Eppstein继续通过SassScript来继续扩充Sass的功能。SassScript是一个在Sass文件中使用的小型脚本语言。（维基百科）

准备工作

  • 安装Ruby环境
1
brew install ruby

安装Sass编译器

1
gem install sass

编译Scss文件为Css文件

<dir_scss>/<filename>.scss：编译前的Sass文件路径
<dir_css>/<filename>.css：编译后的Css文件

--watch <format>：指定编译后的格式

nested：缺省值，嵌套
compact：紧凑
expanded：扩展
compressed：压缩

1
sass <dir_scss>/<filename>.scss:<dir_css>/<filename>.css

实时编译

1
sass --watch <dir_scss>:<dir_css>

交互式执行Sass代码

1
sass -i

编译的Css格式

嵌套（nested）

  • 缺省格式
1
2
3
4
5
6
ul {
  margin: 0;
  li {
    padding: 0;
  }
}
1
2
3
4
ul {
  margin: 0; }
  ul li {
    padding: 0; }

紧凑（compact）

1
2
3
4
5
6
ul {
  margin: 0;
  li {
    padding: 0;
  }
}
1
2
ul { margin: 0; }
ul li { padding: 0; }

扩展（expanded）

1
2
3
4
5
6
ul {
  margin: 0;
  li {
    padding: 0;
  }
}
1
2
3
4
5
6
ul {
  margin: 0;
}
ul li {
  padding: 0;
}

压缩（compressed）

1
2
3
4
5
6
ul {
  margin: 0;
  li {
    padding: 0;
  }
}
1
ul{margin:0}ul li{padding:0}

Sass不同版本的语法

  • Sass3.0以前的文件扩展名为.sass，文件采用缩进语法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 多行注释
   多行注释

// 单行注释
   单行注释

@import base

=name
  margin: 0

.class-name
  +name

ul
  margin: 0
  li
    padding: 0
  • Sass3.0及以后的文件扩展名为.scss，表示Sassy Css，文件采用类似Css的语法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 多行注释
   多行注释 */

// 单行注释
// 单行注释

@import base;

@mixin name {
  margin: 0;
}

.class-name {
  @include name;
}

ul {
  margin: 0;
  li {
    padding: 0;
  }
}

注释

单行注释

  • 单行注释不会在编译后被保留
1
// 单行注释

多行注释

  • 多行注释会在编译后保留，但是不会在压缩编译后保留
1
/* 多行注释 */

强制内容注释

  • 强制内容注释会在编译后始终保留
1
/*! 强制内容注释 */

输出数据的数据类型

1
type-of(数据)

数据类型

number

1
type-of(1)
1
type-of(1px)

string

1
type-of(red)
1
type-of("red")

list

1
type-of(1px solid #000)
1
type-of(1px,solid,#000)

color

1
type-of(#000)
1
type-of(red)
1
type-of(hsl(0, 0, 0))

map

1
type-of(key: value)

bool

1
type-of(true)
1
type-of(false)

运算符

数值运算符

1
2
3
4
1 + 1
1 - 1
1 * 1
(1 / 1)

带单位

1
1px + 1px

混合

1
1 + 1px

比较运算符

1
2
3
4
5
1 > 1
1 < 1
1 = 1
1 >= 1
1 <= 1

逻辑运算符

1
2
3
(1 = 1) and (1 = 1)
(1 = 1) or (1 = 1)
not(1 = 1)
1
2
3
@if not 表达式 {
  ...
}

定义变量

1
$变量名: 值;

变量中引用其他变量

1
2
$变量名1: 值;
$变量名2: $变量名1;

使用变量

1
2
3
* {
  margin: $变量名;
}

嵌套样式

用于省略子级选择器中的重复名称

  • 不使用占位符，默认为父级 子级
1
2
3
4
5
6
父级 {
  margin: 0;
  子级 {
    padding: 0;
  }
}
1
2
3
4
5
6
父级 {
  margin: 0;
}
父级 子级 {
  padding: 0;
}
  • 使用占位符&表示父级

用法1：用于:hover

1
2
3
4
5
6
父级 {
  margin: 0;
  &:hover {
    padding: 0;
  }
}
1
2
3
4
5
6
父级 {
  margin: 0;
}
父级:hover {
  padding: 0;
}

用法2：用于子级名称包含父级名称

1
2
3
4
5
6
父级 {
  margin: 0;
  & &-子级 {
    padding: 0;
  }
}
1
2
3
4
5
6
父级 {
  margin: 0;
}
父级 父级-子级 {
  padding: 0;
}

用于省略子级属性名中的重复部分

案例1：省略的属性名不包含属性值

1
2
3
4
5
6
7
* {
  font: {
    family: Helvetia;
    size: 15px;
    weight: normal;
  }
}
1
2
3
4
5
* {
  font-family: Helvetia;
  font-size: 15px;
  font-weight: normal;
}

案例2：省略的属性名包含属性值

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

样式集

定义mixin

定义不包含参数的mixin

1
2
3
@mixin 样式集名称 {
  ...
}

定义包含参数的

1
2
3
4
5
6
7
8
@mixin 样式集名称 (参数1, 参数2) {

  ...
  
  属性名: $参数1;
  属性名: $参数2;
  
}

定义包含mixin的mixin

1
2
3
4
5
6
7
8
9
10
@mixin 样式集名称1 (参数1, 参数2) {
  ...
}

@mixin 样式集名称2 (参数1, 参数2) {

  ...
  
  @include 样式集名称1;
}

定义包含子级的mixin

1
2
3
4
5
6
7
8
@mixin 样式集名称2 (参数1, 参数2) {

  ...
  
  a {
    ...
  }
}

使用mixin

使用不带参数的mixin

1
2
3
4
5
6
* {

  ...
  
  @include 样式集名称;
}

使用带参数的mixin

1
2
3
4
5
6
* {

  ...
  
  @include 样式集名称(参数1:值, 参数2:值);
}
通过命名参数传参
1
2
3
4
5
6
* {

  ...
  
  @include 样式集名称(值, 值);
}

继承

  • 继承制定选择器及其子选择器的所有样式
1
2
3
4
5
6
7
8
9
10
11
父级 {
  ...
}

父级 子级 {
  ...
}

* {
  @extend 父级;
}

包含其他样式文件

  • 使用@import引入其他样式文件，在编译时将被引入的文件的所有样式打包到当前样式文件
  • 被引入的样式文件称为Partials，Partials的文件名通常以_作为前缀
_base.scss
1
2
3
4
* {
  margin: 0;
  padding: 0;
}
style.scss
1
2
3
4
5
6
@import "base";

* {
  margin: 0;
  padding: 0;
}

通过Interpolation将变量值插入到CSS代码中

插入变量值到CSS注释中

1
2
3
$变量名 = 值;

/* #{$变量名} */

插入变量值到CSS选择器中

1
2
3
4
5
$变量名 = 值;

.类名-#{$变量名} {
  ...
}
1
2
3
.类名-值 {
  ...
}

插入变量值到CSS属性名中

1
2
3
4
5
$变量名 = 变量值;

.类名 {
  属性名-#{$变量名}: 属性值;
}
1
2
3
.类名 {
  属性名-变量值: 属性值;
}

分支语句

if

1
2
3
4
5
* {
  @if 表达式 {
    ...
  }
}
1
2
3
4
5
6
7
8
9
* {
  @if 表达式 {
    ...
  } @else if 表达式 {
    ...
  } @else {
    ...
  }
}

循环语句

while

1
2
3
4
5
@while 表达式 {
  .类名-#{$i} {
    ...
  }
}

for

包含结束值

1
2
3
4
5
@for $i from 1 through 2 {
  .类名-#{$i} {
    margin: 0;
  }
}
1
2
3
4
5
6
7
.类名-1 {
  margin: 0;
}

.类名-2 {
  margin: 0;
}

不包含结束值

1
2
3
4
5
@for $i from 1 to 2 {
  .类名-#{$i} {
    margin: 0;
  }
}
1
2
3
.类名-1 {
  margin: 0;
}

each

  • 遍历一个列表中的所有数据
1
2
3
4
5
6
7
$list: item-1 item-2;

@each $item in $list {
  .类名-$item {
    margin: 0;
  }
}
1
2
3
4
5
6
7
.类名-item-2 {
  margin: 0;
}

.类名-item-1 {
  margin: 0;
}

函数

1
2
3
@function 函数名(参数列表) {
  @return 返回值;
}

警告提示

  • 警告提示信息会在命令行中输出
1
@warn "提示内容";

错误提示

  • 错误提示信息会在编译后的.css文件中输出
1
@error "提示内容";

完成

参考文献

哔哩哔哩——8m88