Blog
HiuZing
2022-06-15
目录

Scss基本认识

# 嵌套规则

# 选择器嵌套

scss的样子，子元素向父元素内部嵌套

.container {
    width: 1200px;
    margin: 0 auto;
    .header {
        .img {
            width: 100px;
            height: 60px;
        }
    }
}
1
2
3
4
5
6
7
8
9
10

css样式

.container {
    width: 1200px;
    margin: 0 auto;
}
.container .header .img {
    width: 100px;
    height: 60px;
}
1
2
3
4
5
6
7
8

# 属性嵌套

有些css属性遵循相同的命名空间 (相同的开头)，比如font-family，font-size，font-weight都以font作为属性的命名空间

为了便于管理这样的属性，也为了避免重复输入

.container {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
1
2
3
4
5
6
7

编译后css

.container {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold;
}
1
2
3
4
5

命名空间也可以包含自己的属性值

.container {
  color: red {
    adjust: fantasy;
  }
}
1
2
3
4
5

编译成css

.container {
  color: red;
  color-adjust: fantasy;
}
1
2
3
4

# 父选择器&

当给某个元素设定 hover 样式时，可以用& 代表嵌套规则外层的父选择器，scss在编译时会把&替换成父选择器名

案例里面的&表示的就是父级a选择器

.container {
    a {
        color: #333;
        &:hover {
             text-decoration: underline;
             color: #f00;
        }
    }
}
1
2
3
4
5
6
7
8
9

转化成css

.container a {
    color:#333;
}
.container a:hover {
    text-decoration:underline;
    color:#F00;
}
1
2
3
4
5
6
7

也可以使用&进行选择器名称拼接

.main {
    color: black;
    &-sidebar { border: 1px solid; }
}
1
2
3
4

转化成css

.main {
    color: black;
}
.main-sidebar {
    border: 1px solid;
}
1
2
3
4
5
6

# 变量

# 用法

scss中的变量，以美元符号$开头，赋值方法与 css属性的写法一样

$color:#F00;
p {
    color: $color;
}
1
2
3
4

# 变量规则

  1. 变量以美元符号$开头，后面跟变量名；
  2. 变量名是不以数字开头的可包含字母、数字、下划线、横线（连接符）；
  3. 通过连接符-与下划线_定义的同名变量为同一变量；
  4. 变量一定要先定义，后使用；
  5. 写法同css，即变量名和值之间用冒号:分隔；

# 变量作用域

  1. 变量作用域分为全局变量域和局部变量域：
    • 全局变量：声明在最外层的变量，可在任何地方使用；
    • 局部变量：嵌套规则内定义的变量只能在嵌套规则内使用。
  2. 将局部变量转换为全局变量可以添加!global 声明。
$color: red;
.container {
    $height: 500px;
    $font-size: 16px !global;
    font-size: $font-size;
    color: $color;
    height: $height;
}
.footer {
    /**$font-size使用!global 申明成全局变量了*/
    font-size: $font-size; 
    /**
    * Error: Undefined variable. 
    * $height是.container下的局部变量，无法在.footer下面编译
    */
    height:$height;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

编译后

.container {
    font-size: 16px;
    color: red;
    height: 500px;
}

.footer {
     /**$font-size使用!global 申明成全局变量了*/
    font-size: 16px;
}
1
2
3
4
5
6
7
8
9
10

# 7种主要的数据类型

  1. 数字，1rem、2vh、13、 10px；
  2. 字符串，分有引号字符串与无引号字符串，"foo"、 'bar'、baz；
  3. 颜色，blue, #04a3f9, rgba(255,0,0,0.5)；
  4. 布尔型，true和false；
  5. 空值，null是其类型的唯一值。表示缺少值，通常由函数返回以表示缺少结果；
  6. 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em,Helvetica,Arial,sans-serif；
  7. maps， 相当于 JavaScript的 object，(key1: value1, key2: value2)；
$layer-index: 10;
$border-width: 3px;

$font-weight: bold;

$font-base-family: "Open Sans", Helvetica, Sans-Serif;
$block-base-padding: 6px 10px 6px 10px;

$top-bg-color: rgba(255, 147, 29, 0.6);

$blank-mode: true;

$var: null;

$fonts: (
  serif: "Helvetica Neue",
  monospace: "Consolas",
);

.container {
  font-family: $font-base-family;
  font-size: $font-size;
  padding: $block-base-padding;

  @if $blank-mode {
    background-color: #000;
  } @else {
    background-color: #fff;
  }

  content: type-of($var);
  content: length($var);
  color: $top-bg-color;
}

// 如果列表中包含空值，则生成的CSS中将忽略该空值。
.wrap {
  font: 18px $font-weight map-get($fonts, "sans");
}
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

编译成css

.container {
  font-family: "Open Sans", Helvetica, Sans-Serif;
  font-size: 16px;
  padding: 6px 10px 6px 10px;
  background-color: #000;
  content: null;
  content: 1;
  color: rgba(255, 147, 29, 0.6);
}

.wrap {
  font: 18px bold; // 如果列表中包含空值，则生成的CSS中将忽略该空值。
}
1
2
3
4
5
6
7
8
9
10
11
12
13

# !default

可以在变量的结尾添加!default来给变量设置默认值，有点类似Javascript的逻辑运算符let content=content || "Second content"

注意，变量是 null时将视为未被!default赋值

$content: "First content";
// 如果$content之前没定义就使用如下的默认值
$content: "Second content" !default;
#main {
    content: $content;
}
1
2
3
4
5
6

编译成css

#main {
  content: "First content";
}
1
2
3

# 圆括号

圆括号()可以用来影响运算的顺序，和数学中的效果是一致的

# 运算符

相等运算==和不相等运算!=。所有数据类型均支持 == 和!=，另外，每种数据类型也有其各自支持的运算方式

$theme:"blue";

.container {
    @if $theme=="blue" {
        background-color: red;
    }
    @else {
        background-color: blue;
    }
}

.container {
    @if $theme !="blue" {
        background-color: red;
    }
    @else {
        background-color: blue;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

编译为css

.container {
  background-color: red;
}

.container {
  background-color: blue;
}
1
2
3
4
5
6
7

# 关系运算符

四个关系运算符< > >= <=

$theme:3;
.container {
    @if $theme >= 5 {
        background-color: red;
    }
    @else {
        background-color: blue;
    }
}
1
2
3
4
5
6
7
8
9

编译为css

.container {
    background-color: blue;
}
1
2
3

# 布尔运行符

三个布尔运算符and or not

$width: 100;
$height: 200;
$last: false;
div {
  @if $width>50 and $height<300 {
    font-size: 16px;
  } @else {
    font-size: 14px;
  }
  @if not $last {
    border-color: red;
  } @else {
    border-color: blue;
  }

  @if $width>500 or $height<300{
    line-height: 20px;
  } @else {
    line-height: 50px;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

编译为css

div {
    font-size: 16px;
    border-color: red;
    line-height: 20px;
}div {
    font-size: 16px;
    border-color: red;
}
1
2
3
4
5
6
7
8

# 数字操作符

\+ - * / %

/* 纯数字与百分号或单位运算时会自动转化成相应的百分比与单位值 */
.container {
    /* ================== + 运算===================== */
    width: 50 + 20;
    width: 50 + 20%;
    width: 50% + 20%;
    width: 10pt + 20px;
    width: 10pt + 20;

    /* ================== - 运算===================== */
    height: 50 - 20;
    height: 10 - 20%;
    height: 50pt - 20px;

    /* ================== * 运算===================== */
    height: 50 * 30;
    height: 10 * 30%;
    height: 50 * 2px;
    height: 50pt * 4;

    /* ==================/ 运算 (除完后最多只能保留一种单位)===================== */
    $width: 100px;
    width: 10/5;
    width: 10px / 5px;
    width: 10px / 20;
    width: ($width/2); // 使用变量与括号
    height: (500px/2); // 使用了括号

    /* ==================% 求余运算===================== */
    width: 10 % 3;
    width: 50px % 7;
    width: 50% % 7;
}
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

编译成css

/* 纯数字与百分号或单位运算时会自动转化成相应的百分比与单位值 */
.container {
    /* ================== + 运算===================== */
    width: 70;
    width: 70%;
    width: 70%;
    width: 25pt;
    width: 30pt;
    /* ================== - 运算===================== */
    height: 30;
    height: -10%;
    height: 35pt;
    /* ================== * 运算===================== */
    height: 1500;
    height: 300%;
    height: 100px;
    height: 200pt;
    /* ==================/ 运算 (除完后最多只能保留一种单位)===================== */
    width: 10/5;
    width: 10px/5px;
    width: 10px/20;
    width: 50px;
    height: 250px;
    /* ==================% 运算===================== */
    width: 1;
    width: 1px;
    width: 1%;
}
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

/在css中有分隔数字的用途，在scss中，以下三种情况会进行除法运算：

  1. 如果值或值的一部分，是变量或者函数的返回值；
  2. 如果值被圆括号包裹；
  3. 如果值是算数表达式的一部分。
$width: 1000px;
div {
    font: 16px/30px Arial, Helvetica, sans-serif; // 不运算
    width: ($width/2); // 使用变量与括号
    width: (#{$width}/2); // 使用 #{} 插值语句将变量包裹，避免运算。
    z-index: round(10)/2; // 使用了函数
    height: (500px/2); // 使用了括号
    margin-left: 5px + 8px/2px; // 使用了+表达式
}
1
2
3
4
5
6
7
8
9

编译成css

div {
    font: 16px/30px Arial, Helvetica, sans-serif;
    width: 500px;
    width: 1000px/2;
    z-index: 5;
    height: 250px;
    margin-left: 9px;
}
1
2
3
4
5
6
7
8

如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 css文件中，只需要用 #{} 插值语句将变量包裹

# 字符串运算

  1. +可用于连接字符串；
  2. 如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的；
  3. 无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。
.container {
    content: "Foo " + Bar;
    font-family: sans- + "serif";
}
1
2
3
4

编译为css

.container {
    content: "Foo Bar";
    font-family: sans-serif;
}
1
2
3
4

# 插值语句

文章上面有讲到插值语句，这里来解释一下 通过 #{} 插值语句可以在选择器、属性名、注释中使用变量，使用#{}插值语句将变量包裹起来即可，和js中的模板字符串很像

$font-size: 12px;
$line-height: 30px;
$class-name: danger;
$attr: color;
$author: "福大命大";

p {
    font: #{$font-size}/#{$line-height} Arial Helvetica, sans-serif;
}

/* 
* 这是文件的说明部分
* @author: #{$author}
*/

a.#{$class-name} {
    border-#{$attr}: #f00;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

编译成css

p {
    font: 12px/30px Arial Helvetica, sans-serif;
}

/* 
* 这是文件的说明部分
* @author: 福大命大
*/
a.danger {
    border-color: #f00;
}
1
2
3
4
5
6
7
8
9
10
11

# 流程控制

sass中流程控制包含四类，也是我们在js中常见的@if、@for、@each、@while

# @if

@if语法和js类似，基本格式是@if...@else if...@else。

$theme:3;
.container {
    @if $theme >= 5 {
        background-color: red;
    }
    @else {
        background-color: blue;
    }
}
1
2
3
4
5
6
7
8
9

编译为css

.container {
    background-color: blue;
}
1
2
3

# @for

for在条件范围内重复操作，这个指令包含两种格式：

  1. @for $var from <start> through <end>；
  2. @for $var from <start> to <end>。

两者区别在于 through 与 to的含义：

  1. 使用 through时，条件范围包含 <start> 与 <end>的值；
  2. 使用 to时条件范围只包含<start>的值不包含<end>的值；
  3. $var 可以是任何变量，比如$i，<start> 和 <end> 必须是整数值。
@for $i from 1 to 3 {
  #loading span:nth-child(#{$i}) {
      width: 20 * ($i - 1) + px;
  }
}
1
2
3
4
5

编译为

#loading span:nth-child(1) {
    width: 0px;
}

#loading span:nth-child(2) {
    width: 20px;
}
1
2
3
4
5
6
7

如果把to换成through

#loading span:nth-child(1) {
    width: 0px;
}

#loading span:nth-child(2) {
    width: 20px;
}

#loading span:nth-child(3) {
    width: 40px;
}
1
2
3
4
5
6
7
8
9
10
11

# @each

@each指令的格式是@each $var in $list , $var可以是任何变量名，比如$length 或者$name，而$list是一连串的值，也就是值列表

$color-list:red green blue turquoise darkmagenta;
@each $color in $color-list {
    $index: index($color-list, $color);
    .p#{$index - 1} {
        background-color: $color;
    }
}
1
2
3
4
5
6
7

编译为

.p0 {
    background-color: red;
}

.p1 {
    background-color: green;
}

.p2 {
    background-color: blue;
}

.p3 {
    background-color: turquoise;
}

.p4 {
    background-color: darkmagenta;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# @while

@while 指令循环输出直到表达式返回结果为 false。这样可以实现比@for 更复杂的循环。

比如，可以借此生成栅格化布局。

$column:12;
@while $column>0 {
   .col-sm-#{$column} {
      width: $column / 12 * 100%;
   }
    $column:$column - 1;
}
1
2
3
4
5
6
7

编译为

.col-sm-12 {
    width: 100%;
}

.col-sm-11 {
    width: 91.6666666667%;
}

.col-sm-10 {
    width: 83.3333333333%;
}

.col-sm-9 {
    width: 75%;
}

.col-sm-8 {
    width: 66.6666666667%;
}

.col-sm-7 {
    width: 58.3333333333%;
}

.col-sm-6 {
    width: 50%;
}

.col-sm-5 {
    width: 41.6666666667%;
}

.col-sm-4 {
    width: 33.3333333333%;
}

.col-sm-3 {
    width: 25%;
}

.col-sm-2 {
    width: 16.6666666667%;
}

.col-sm-1 {
    width: 8.3333333333%;
}
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
45
46
47

# @import

@import算是一个比较简易的模块系统。scss拓展了@import 的功能，允许其导入 scss或 sass文件

被导入的文件将合并编译到同一个 css文件中，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用

$color:red;//common.scss
1
@import "common.scss";
.container {
    border-color: $color;
}

// index.scss
1
2
3
4
5
6

编译成

.container {
  border-color: red;
}
1
2
3

以下情况下，@import 仅作为普通的css语句，不会导入scss文件：

  1. 文件拓展名是.css；
  2. 文件名以 http://开头；
  3. 文件名是url()；
  4. @import包含媒体查询。
@import "common.css";
@import url(common);
@import "http://xxx.com/xxx";
@import 'landscape' screen and (orientation:landscape);
1
2
3
4

scss允许同时导入多个文件，例如同时导入 rounded-corners 与text-shadow两个文件，不用再单独写个import引入

@import "rounded-corners", "text-shadow";
1

导入文件也可以使用 #{} 插值语句（下面有讲，这里把它理解成js中模板字符串就行）动态导入，但不是通过变量动态导入 scss文件，只能作用于 css的 url()导入方式

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");
1
2

编译为

@import url("http://fonts.googleapis.com/css?family=Droid+Sans");
1

# @Partials

如果需要导入 scss或者 sass文件，但又不希望将其编译为 css，只需要在文件名前添加下划线，这样会告诉 scss不要编译这些文件

注意：

  1. 导入语句中却不需要添加下划线；
  2. 不可以同时存在添加下划线与未添加下划线的同名文件，添加下划线的文件将会被忽略。
$color:red;//_common.scss
1
@import "common.scss";
.container {
    border-color: $color;
}
//index.scss
1
2
3
4
5

Partials主要是用来定义公共样式的，专门用于被其他的 scss文件 import进行使用的。

# 嵌套@import

大多数情况下，一般在文件的最外层（不在嵌套规则内）使用@import，其实，也可以将@import 嵌套进内层选择器或者 @media 中，与平时的用法效果相同，只是这样导入的样式只能出现在嵌套的层中，存在作用域。

.example {
    color: red;
}//common.scss
1
2
3
#main {
    @import "example";
}
1
2
3

被编译成

#main .example {
    color: red;
}
1
2
3

注意：@import不能嵌套使用在控制指令或混入中（带有@符号的叫指令）

# @media 媒体查询增强

scss中，@media 指令与 css中用法一样，只是增加了一点额外的功能，允许在css规则中嵌套。如果@media 嵌套在 css规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。这个让 @media 方便不少，不需要重复写选择器，也不会打乱 css的书写流程。

# 使用

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
    .item {
      height: auto;
    }
  }
}
1
2
3
4
5
6
7
8
9

编译为

.sidebar {
    width: 300px;
}
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
  .sidebar .item {
    height: auto;
  }
}
1
2
3
4
5
6
7
8
9
10
11

# 使用插值

可以使用变量，函数，以及运算符代替条件的名称或者值。

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}
1
2
3
4
5
6
7
8
9

编译为

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px;
  }
}
1
2
3
4
5

# @mixin

混合指令（Mixin）用于定义可重复使用的样式。混合指令可以包含所有的css规则，绝大部分 scss规则，甚至可以通过参数功能引入变量，输出多样化的样式。

注意：函数命名和变量命名规则一致。

# 使用

@mixin mixin-name() {
    /* css 声明 */
}
// 使用
@include mixin-name;
1
2
3
4
5

# 标准形式

// 定义一个区块基本的样式
@mixin block {
    width: 96%;
    margin-left: 2%;
    border-radius: 8px;
    border: 1px #f6f6f6 solid;
}
// 使用混入 
.container {
    .block {
        @include block;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

编译为

.container .block {
    width: 96%;
    margin-left: 2%;
    border-radius: 8px;
    border: 1px #f6f6f6 solid;
}
1
2
3
4
5
6

# 嵌入选择器

@mixin里面再嵌套一层

@mixin warning-text {
    font-size: 12px;
    .warn-text {
        color: rgb(255, 253, 123);
        line-height: 180%;
    }
}

.container {
       @include warning-text;
}
1
2
3
4
5
6
7
8
9
10
11

编译为

.container {
    font-size: 12px;
}

.container .warn-text {
    color: #fffd7b;
    line-height: 180%;
}
1
2
3
4
5
6
7
8

# 单参数

// 定义flex布局元素纵轴的排列方式
@mixin flex-align($aitem) {
    align-items: $aitem;
}

// 只有一个参数，直接传递参数
.container {
    @include flex-align(center);
}
1
2
3
4
5
6
7
8
9

编译为

.container {
    align-items: center;
}
1
2
3

# 多参数

// 定义块元素内边距
@mixin block-padding($top, $right, $bottom, $left) {
    padding-top: $top;
    padding-right: $right;
    padding-bottom: $bottom;
    padding-left: $left;
}

// 按照参数顺序赋值
.container1 {
   @include block-padding(10px, 20px, 30px, 40px);
}

// 可指定参数赋值
.container2 {
   @include block-padding($left: 20px, $top: 10px, $bottom: 10px, $right: 30px);
}

// 可指定参数赋值，但是必须指定4个值，不能缺失
.container3 {
   @include block-padding($left: 10px, $top: 10px, $bottom: 0, $right: 0);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

编译为

.container1 {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}

.container2 {
    padding-top: 10px;
    padding-right: 30px;
    padding-bottom: 10px;
    padding-left: 20px;
}

.container3 {
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 10px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 指定默认值

// 定义块元素内边距，参数指定默认值
@mixin block-padding($top:0, $right:0, $bottom:0, $left:0) {
    padding-top: $top;
    padding-right: $right;
    padding-bottom: $bottom;
    padding-left: $left;
}

// 可指定参数赋值
.container {
    /** 不带参数 */
    @include block-padding;
    /** 按顺序指定参数值 */
    @include block-padding(10px,20px);
    /** 给指定参数指定值 */
    @include block-padding($left: 10px, $top: 20px)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

编译为

.container {
    /** 不带参数 */
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    /** 按顺序指定参数值 */
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 0;
    padding-left: 0;
    /** 给指定参数指定值 */
    padding-top: 20px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 10px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 可变参数

使用...处理参数不固定的情况，类似于js中的函数的剩余参数

@mixin linear-gradient($direction, $gradients...) {
    background-color: nth($gradients, 1);
    background-image: linear-gradient($direction, $gradients);
}

.table-data {
    @include linear-gradient(to right, #F00, orange, yellow);
}
1
2
3
4
5
6
7
8

编译为

.table-data {
    background-color: #F00;
    background-image: linear-gradient(to right, #F00, orange, yellow);
}
1
2
3
4

# 总结

  1. mixin是可以重复使用的一组css声明，有助于减少重复代码，只需声明一次，就可在文件中引用；
  2. 混合指令可以包含所有的 css规则，绝大部分scss规则，可以传递参数，输出多样化的样式；
  3. 使用参数时建议加上默认值；
  4. @import导入局部模块化样式（类似功能、同一组件）；
  5. @minix定义的是可重复使用的样式；

# @function

@function用于封装复杂的操作，可以很容易地以一种可读的方式抽象出通用公式和行为，函数提供返回值，常用来做计算方面的工作。

# 使用

注意：函数命名和变量命名规则一致。

@function square($base) {
    @return $base * $base * 1px;
}

.sidebar {
    float: left;
    margin-left: square(4);
}
1
2
3
4
5
6
7
8

编译为

.sidebar {
    float: left;
    margin-left: 16px;
}
1
2
3
4

# 可选参数

默认值可以是任何表达式，它们甚至可以引用前面的参数！

//change-color和hue是内置方法
//hue 返回$color的颜色为0到360度之间的一个数字。
//change-color 用于设置颜色的属性
@function invert($color, $amount: 100%) {
    //@error hue($color); 调试 210deg
    $inverse: change-color($color, $hue: hue($color) + 180);
    @return mix($inverse, $color, $amount);
}

$primary-color: #036;
.header {
    background-color: invert($primary-color, 80%);
}
1
2
3
4
5
6
7
8
9
10
11
12
13

编译为

.header {
    background-color: #523314;
}
1
2
3

# 指定参数

$primary-color: #036;
.banner {
    //scale-color Fluidly scales one or more properties of .$color
    background-color: $primary-color;
    color: scale-color($primary-color, $lightness: +40%);
}
1
2
3
4
5
6

编译为

.banner {
    background-color: #036;
    color: #0a85ff;
}
1
2
3
4

# 可变参数

参数列表还可用于采用任意关键字参数，meta.keywords()函数采用参数列表

@function sum($numbers...) {
    $sum: 0;
    @each $number in $numbers {
        $sum: $sum + $number;
    }
    @return $sum;
}

$widths: 50px, 30px, 100px;
.micro {
    width: sum($widths...);
}
1
2
3
4
5
6
7
8
9
10
11
12

编译为

.micro {
    width: 180px;
}
1
2
3

# @return

@return只允许在@function内使用，和js一样，遇到return就会返回。

@function red() {
    $is: true;
    @if $is {
        @return 'is';
    }
    @return red;
}
.con{
    color: red();
}
1
2
3
4
5
6
7
8
9
10

编译为

.con {
    color: "is";
}
1
2
3

总结： @function和@mixin参数的使用方式没啥区别； @function用来计算，@mixin用来封装样式，@import用来抽离他们为一个模块。

上次更新: 2024/08/14, 04:14:33
flex常见布局
JS和Scss共享变量

← JS和Scss共享变量→

最近更新
01
React Native 使用SVG
08-13
02
Docker基础命令
08-04
03
算数逻辑单元
07-30
更多文章>
Theme by Vdoing | Copyright © 2021-2024 WeiXiaojing | 友情链接