Sass的基本使用

# 介绍

sass基于Ruby语言开发而成css扩展语言，.less使用less.js在浏览器端编译less文件而使用sass是不支持浏览器端编译sass文件。如果不适用前端工程化编译sass,sass一般是在服务器端渲染的这样会影响到服务器的性能。

# 安装

安装sass前需要安装Ruby (opens new window)。（注:mac下自带Ruby无需在安装Ruby!）

window下安装SASS首先需要安装Ruby，先从官网下载Ruby (opens new window)并安装。安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。

安装完成后在命令行中输入指令查看ruby版本号,如果输出当前ruby版本号表示安装成功:

ruby -v

将ruby gem管理工具切换到国内镜像源

gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/

切换为国内镜像源后,查看是否切换成功保证,gem只有一个国内镜像源

//打印是否替换成功 gem sources -l 
# 确保只有 gems.ruby-china.com

1
2

安装sass

gem install sass #安装完成后 输入 sass -v 查看是否安装成功

# 编译Sass

sass编译有很多种方式，如命令行编译模式、sublime插件SASS-Build、编译软件koala、前端自动化软件codekit、Grunt打造前端自动化工作流grunt-sass、Gulp打造前端自动化工作流gulp-ruby-sass等。

# 命令行编译

//单文件转换命令
sass input.scss output.css

//单文件监听命令
sass --watch input.scss:output.css

//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
sass --watch app/sass:public/stylesheets

1
2
3
4
5
6
7
8

sass编译支持4种格式 :

注意：

这里的 // 注释 指的是用 双斜杠(//) 的注释

这里的 /**/ 注释 指的是用 (/* */) 的注释

nested （默认格式） 删除掉sass文件中所有使用//注释，保留使用/**/注释

sass demo.scss demo.css --style nested

.box {
  background-color: red; 
}

.box .label {
    font-size: 18px; 
}

1
2
3
4
5
6
7

expanded 完全不压缩 删除掉sass文件中所有使用//注释，保留使用/**/注释

sass 01.basic.scss 01.basic.css --style expanded

@charset "UTF-8";
.box {
  background-color: red;
  /*我也是注释*/
}
.box .label {
  font-size: 18px;
}

1
2
3
4
5
6
7
8

compact 将每个选择器的css样式压缩为一行展示 删除掉sass文件中所有使用//注释，保留使用/**/注释

sass 01.basic.scss 01.basic.css --style compact

@charset "UTF-8";
.box { background-color: red; line-height: 20px; /*我也是注释*/ }
.box .label { font-size: 18px; color: red; }

1
2
3

compressed 所有的选择器样式全部被压缩为一行，并删除掉所有的注释

监听单一sass文件，当sass文件内容发生改变时 sass会自动更新对应css文件 sass --watch input.scss:output.css

sass --watch 01.basic.scss:01.basic.css --style expanded
# 监听成功后会提示下面的文字，Sass开始监听文件的变化。按ctrl + c停止监听请 
>>> Sass is watching for changes. Press Ctrl-C to stop.

1
2
3

监听多个sass文件，将需要监听的sass文件存放在同一目录下。该文件夹内任何sass文件发生改变，监听都会更行输出css文件 sass --watch sass文件路径:css文件路径

sass --watch scss:css --style expanded

更多详细请参考官方网址：Sass中文网 - 如何安装Sass (opens new window)

# 变量

概念：sass与less相同支持在文件中声明使用变量存储数据
语法：sass使用$符号声明变量

less使用的是@符号

$height: 18; 
$name: order; 
$str: "string"; 
$bool: true;

1
2
3
4

注意：sass支持6种数据类型
- 字符串："foo" 'foo' foo
- 数字：18 10px
- 布尔值： true false 支持and or 以及 not 运算
- 空类型：null
- 数组list：1 2 3 4 a,b,c,d
- 对象maps: （key1: value1, key2: value2）

字符串：字符串的使用与less很相似sass中字符串分为无引号字符串与有引号字符串,都支持加号“+”字符串拼接，当需要给属性或选择器进行字符串拼接时需要使用 #{} 符号进行拼接

注意 #{}括号语法会将有引号字符串编译为无引号字符串.

$str: soli;

.box {
    border: 1px $str+d #ccc;
}

/*编译后*/
.box {
    border: 1px solid #ccc;
}

1
2
3
4
5
6
7
8
9
10

#{}的用法

#{}.png

# 数组List

Sass支持一系列数据集合数据类型,这种数据类型与js中js数组相似的,一般情况下list中每一项使用空格或者逗号隔开。直接将数list值给属性。list会被当做一个完整的字符串。

$margin: 1px 2px 3px 4px;
$font  : Helvetica, Arial, sans-serif;

.box {
   margin: $margin;
   font: $font;
}

/*编译后*/

.box {
  margin: 1px 2px 3px 4px;
  font: Helvetica, Arial, sans-serif;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

在list数组中同时使用 逗号","和空格" "分割数组不同项时,这是该数组就会变成一个由多个子数组合并的数组(逗号的优先级高于空格)

$list:1 2,3 4 // 该list包含两个子数组 1 2和 3 4

在sass中圆括号"()"可以对list进行分组,并且圆括号不会输出到css中

$margin: (1px 2px) (3px 4px);
.box {
   margin: $margin;
}

/*编译后*/
.box {
   margin: 1px 2px 3px 4px;
}

1
2
3
4
5
6
7
8
9

# 数组的API

# 1. append

append($list , $value , $separator: space) 返回向指定数组添加一项的新数组,该方法接收三个参数:

参数一：指定添加项的数组
参数二：向数组中添加新一项的值
参数三：数组使用逗号(comma)还是空格(space)进行分隔每一项默认值（auto）。

append(10px 20px, 30px); // 10px 20px 30px

append((blue, red), green); // blue, red, green 

append(10px 20px, 30px 40px); // 10px 20px (30px 40px) 

append(10px, 20px, $separator: comma); // 10px, 20px 

append((blue, red), green, $separator: space); // blue red green

1
2
3
4
5
6
7
8
9

# 2. index

index($list, $val)返回需要查询项在数组中的下标,若不存在则返回null.该方法接收两个参数:

参数一: 当前数组
参数二: 数组中需要查询下标的某一项的值

$list: 1px solid #ccc 

index($list, solid) // 2

1
2
3

# 3. length

length($list)返回当前数组的长度

length(10px); // 1 
length(10px 20px 30px); // 3 
length((width: 10px, height: 20px)); // 2 这里是一个map对象

1
2
3

# 3. nth

nth($list, $index)返回数组中指定下标的索引值,$index支持使用负数(倒数)

nth(10px 12px 16px, 2); // 12px 
nth((line1, line2, line3), -1); // line3

1
2

# 3. set-nth

set-nth($list, $n, $value)返回一个修改数组指定下标的值新数组,该方法接收三个参数:

参数一: 当前数组
参数二: 需要修改值的项的下标
参数三: 修改后的值

set-nth(10px 20px 30px, 1, 2em); // 2em 20px 30px

# 嵌套规则

概念: sass允许使用嵌套 合并选择器或媒体查询的代码从而,减少代码量.增强样式层级关系的可读性。
语法： 一般规定嵌套规则最多不能超过三层

嵌套.png sass的嵌套语法同样支持&符号,表示当上层选择器

&.png sass支持css属性嵌套

属性嵌套.png @media同样支持嵌套规则,@media中嵌套@media,编译后嵌套的媒体查询代码会使用and进行连接,写在选择器内部的媒体查询编译后,选择器会被媒体查询所包含。

媒体查询.png

# Mixin

概念: 在sass中支持使用@mixin指令声明一个可复用的sass样式规则集合
语法:

当然Mixin也支持传参

传参.png Mixin传参支持默认值,并且与less一样已传递参数前的参数不可以使用默认值

默认值.png

# 函数指令

概念： 在sass中可以通过@function 指令声明一个sass函数,sass函数一定要有@return值用来承担在sass中的属性的计算功能
语法： 函数的参数与迷信相同都支持默认值,并且实参前面不能使用默认值

@function computedHeight($height) {
    @return ($height + 5 ) /  2
}

.box {
    height   : computedHeight(22px);
}

/*编译后*/
.box {
    height   : 13.5px;
}

1
2
3
4
5
6
7
8
9
10
11
12

# 继承

概念: 在sass中使用@extend指令继承其他选择的全部样式
语法:

.label {
    font-size: 12px;
    line-height: 16px;
    color: #ccc;
}

.title {
    @extend .label;
    border-bottom: 1px solid #ccc;
}

/*编译后*/
.label, .title {
  font-size: 12px;
  line-height: 16px;
  color: #ccc;
}

.title {
  border-bottom: 1px solid #ccc;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 条件语句

概念: 在sass中支持 @if @else-if @else指令实现 if else判断语句
语法: @if可以单独使用

@if.png

@if 语句可以与 @else if一起使用

else if.png

# For循环

概念: sass支持使用for指令,在限制的范围内重复输出格式
语法: 这个指令包含两种格式：

@for $var from <start> through <end>

@for $var from <start> to <end>

1
2
3

两者区别在于 through 循环是从start 到 end 包含 end, to 从start 到 end但是不包含end(包左不包右)

# through

@for $i from 1 through 3 {
    .box-#{$i} {
        padding: $i * 10px;
    }
}
/*编译后*/
.box-1 {
  padding: 10px;
}

.box-2 {
  padding: 20px;
}

.box-3 {
  padding: 30px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# to

@for $i from 1 to 3 {
    .box-#{$i} {
        padding: $i * 10px;
    }
}
/*编译后*/
.box-1 {
  padding: 10px;
}

.box-2 {
  padding: 20px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# Each循环

概念: @each 指令的格式是 $var in <list>, $var 可以是任何变量名而 <list>是一连串的值，也就是数组
语法:

# 遍历1维数组

$arr: 1px 3px 5px 7px;

@each  $val in $arr {
    .name-age-#{$val} {
        margin: $val
    }
}

/*编译结果*/ 
.name-age-1px {
  margin: 1px;
}

.name-age-3px {
  margin: 3px;
}

.name-age-5px {
  margin: 5px;
}

.name-age-7px {
  margin: 7px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 遍历2维数组

$arr: 1px 3px, 5px 7px;

@each $val1, $val2 in $arr {
    .name-age-#{$val1} {
        margin: $val2
    }
}

1
2
3
4
5
6
7

# @while循环

概念: 与js的while类型,sass中@while指令重复输出格式直到表达式返回结果为false。这样可以实现比 @for 更复杂的循环，只是很少会用到
语法: @while <表达式>

$num: 4;

@while $num >= 0 {
    .label-#{$num} {
        height: $num + 10px;
    }
    $num: $num - 2
}

/*编译后*/
.label-4 {
  height: 14px;
}

.label-2 {
  height: 12px;
}

.label-0 {
  height: 10px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 分音

概念: 以下划线_开头的sass文件不会被自动编译成css文件，这个技术叫做分音。分音一般是用来创建一些不需要直接编译成css文件而是提供其他sass文件一些 Mixin、函数、变量等工具sass文件
语法 _tool.scss

只需更改文件名为下划线(_)开始即可

# @import

概念: sass文件支持使用 @import 指令引入外部sass和css文件

注意: 引入sass文件时可以不写后缀名,引入css时必须包含后缀名,引入分音的sass文件时, _下划线(分音符)可以忽略.

引入的外部sass文件会将文件所有代码添加到当前文件编译成css
引入的外部css文件,会在编译后的css文件中使用css的 @import外部引用对应 css 文件

语法:

@import "./demo";             // 等价于 "./demo.scss"
@import "./file";            // "./_file.scss" 可以直接使用 "./file"引入
@import '../01.basic.css';   // css文件必须写后缀名

1
2
3

# 参考链接

Sass中文网 (opens new window)

在线编辑

#CSS&CSS预处理器

上次更新: 2021/11/14, 07:48:46

← Less的基本使用这些CSS3动画你get了吗？→