scss基本使用及操作函数

百科大全

更新时间：2025-10-05 17:48:2427

admin管理员组
文章数量:1794759

scss基本使用及操作函数

操作函数 1、for循环

@for … from … through

@for $var from <start> through <end> // 范围包括<start>和<end>的值

1

@for … from … to

@for $var from <start> to <end> // 范围包括<start>,不包括<end>的值

1

获取数组中第i项的值 nth($arr, $i)
获取指定键值 map-get(nth($arr, $i), $key)

/*** scss ***/ $arr: ( (theme: dark, size: 40px), (theme: light, size: 32px) ); @for $i from 1 through length($arr) { // 遍历数组 $item: nth($arr, $i); // 获取数组中第i项的值 .#{map-get($item, theme)} { width: map-get($item, size); // 获取指定键值 height: map-get($item, size); } } /*** css ***/ .dark { width: 40px; height: 40px; } .light { width: 32px; height: 32px; }

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、each

@each $var in <list or map>

/*** scss ***/ $name: "aa", "bb"; //注意数组list的写法 @each $i in $name { div.#{$i} { width: 100px; } } $name2: (name1: "span", name2: "div"); //注意对象map的写法 @each $i in $name2 { .#{$i} { width: 20px; } } $name3: (name11: 2, name22: 3); //注意对象map的写法 @each $key, $value in $name3 { .#{$key} { width: 10px * $value; } } /*** css ***/ div.aa { width: 100px; } div.bb { width: 100px; } .name1 span { width: 20px; } .name2 div { width: 20px; } .name11 { width: 20px; } .name22 { width: 30px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

3、while /*** scss ***/ $i: 2; @while $i > 0 { .color#{$i} { color: #222 * $i; } $i:$i - 1; //注意: 不能写成$i:$i-1,因为会被当成字符串 } /*** css ***/ .color2 { color: #444444; } .color1 { color: #222222; }

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

4、if

if … if …
if … else if …
if … else if … else …

注：不支持 if … else …

/*** scss ***/ $width1: 100px; $width2: 200px; div { @if $width2 > $width1 { width: $width1; } }

1
2
3
4
5
6
7
8

5、extend

继承目标选择器的所有相关样式
用!optional直接跳过空样式, 防止继承不存在的样式出错

/*** scss ***/ .aa { margin: 0 auto; } div .aa { color: red; } .aa p { margin: 100px; } .bb { @extend .aa; } { @extend .dd!optional; // 用optional,防止.dd不存在而导致的编译报错 } /*** css ***/ .aa, .bb { margin: 0 auto; } div .aa, div .bb { color: red; } .aa p, .bb p { margin: 100px; }

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

6、mixin

不带参数

/*** scss ***/ @mixin aa { margin: 10px; } .bb { @include aa; } /*** css ***/ .bb { margin: 10px; }

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

带参数：参数为数组

/*** scss ***/ $margin: 100px; $left: 10px; @mixin aa($left, $margin) { margin: $margin; left: $left; } .bb { @include aa($left, $margin); } /*** css ***/ .bb { margin: 100px; left: 10px; }

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

带参数：参数为对象接收传递的参数必须是对象相对应key,同时需要用…传递参数

/*** scss ***/ $map: (left: 10px, width: 100px); @mixin aa($left, $width) { // 接收参数为key值 left: $left; width: $width; } div { @include aa($map...); // 传递参数为对象名+... } /*** css ***/ div { left: 10px; width: 100px; }

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

默认参数

@mixin aa($left: 10px){} // 不传参数的话就用默认参数

1

不定参数

/*** scss ***/ @mixin box-shadow($shadows...) { //不定参数,用... -moz-box-shadow: $shadows; -webkit-box-shadow: $shadows; box-shadow: $shadows; } .shadows { @include box-shadow(2px 2px 2px #eee); } /*** css ***/ .shadows { -moz-box-shadow: 2px 2px 2px #eee; -webkit-box-shadow: 2px 2px 2px #eee; box-shadow: 2px 2px 2px #eee; }

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

7、function /*** scss ***/ $width: 20px; @function fun($width) { @return $width * 2; } div { width: fun($width); } /*** css ***/ div { width: 40px; }

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

基本使用 1、定义变量及变量使用

常规使用 $var
拼字符串 #{$var}
用于计算 $var + $var

/*** scss ***/ $width: 1px; $width2: 2px; $pos: bottom; .aa { width: $width; // 常规使用 border-#{$pos}: 1px solid red; // 拼字符串 } .bb { width: $width + $width2; // 用于计算 } /*** css ***/ .aa { width: 1px; border-bottom: 1px solid red; } .bb { width: 3px; }

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

2、嵌套

选择器嵌套
属性嵌套

// 选择器嵌套 div{ color: red; p { color: green; } &:hover{ color: blue; } } // 属性嵌套 .div{ //注：嵌套属性后面必须写冒号如：border： border: { style: solid; left: { width: 4px; color: #888; } } }

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

3、继承

SASS允许一个选择器，继承另一个选择器。 @extend 要继承的选择器

.class1{ border: 1px solid #ddd; } .class2{ @extend .class1; color: #000; }

1
2
3
4
5
6
7

4、 Mixin

Mixin有点像C语言的宏（macro），是可以重用的代码块。

//使用@mixin 定义一个可重用的代码段 @mixin left { float: left; margin-left: 10px; } //使用@include 调用 div{ @include left; }

1
2
3
4
5
6
7
8
9

mixin的强大之处，在于可以指定参数和缺省值。使用的时候，根据需要加入参数。

@mixin left($value: 10px) { 　　float: left; 　　margin-right: $value; } div { 　　@include left(20px); }

1
2
3
4
5
6
7

5、颜色函数 lighten(#cc3, 10%); //颜色变浅 darken(#cc3, 10%); //颜色加深 grayscale(#cc3); //灰度 complement(#cc3); //反色

1
2
3
4

6、注释

SASS共有两种注释风格。标准的CSS注释 /* comment */ ，会保留到编译后的文件。单行注释 // comment，只保留在SASS源文件中，编译后被省略。在/*后面加一个感叹号，表示这是”重要注释”。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信。

7、插入文件 @import "path/filename.scss"; @import "foo.css";

1
2

8、编译风格

nested：嵌套缩进的css代码，它是默认值。 expanded：没有缩进的、扩展的css代码。 compact：简洁格式的css代码。 compressed：压缩后的css代码。

9、List（相当于js中的数组）

定义列表

$list: 'item-1', 'item-2', 'item-3'; //（推荐） $list-space1: 'item-1' 'item-2' 'item-3'; $list-space2: ('item-1' 'item-2' 'item-3'); $list-space3: ('item-1', 'item-2', 'item-3');

1
2
3
4
5

注：1、在Scss中括号不是用来创建列表（除非是空的列表），而是用来做为分隔符 2、和CSS一样，只要没有特殊字符，列表项的引号是可以省略的

列表嵌套

$list: ( ('item-1.1', 'item-1.2', 'item-1.3'), ('item-2.1', 'item-2.2', 'item-2.3'), ('item-3.1', 'item-3.2', 'item-3.3') ); //（推荐） $list: 'item-1.1' 'item-1.2' 'item-1.3', 'item-2.1' 'item-2.2' 'item-2.3', 'item-3.1' 'item-3.2' 'item-3.3';

1
2
3
4
5
6
7
8
9

列表索引是从1开始

列表长度length($list)

获取列表项nth($list, 1)

10、Map（相当于js中的json） map: ( (theme: dark, size: 40px), (theme: light, size: 32px) );

1
2
3
4

map-keys($map) 返回map里面所有的key(list)

map-values($map) 返回map里面所有的value(list)

map-get($map, key) 返回map里面指定key的value

本文标签：函数操作 scss

版权声明：本文标题：scss基本使用及操作函数内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686495594a73928.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。