SassDay03：Sass变量的使用

目录

0x00 Default 默认值 与内置变量

0x01 内置变量

0x02 内置模块别名

0x03 变量的作用域

#css规则代码段

#流程控制代码段

0x04 高级变量功能

#变量判断函数

#从对象中取值

0x05插值使用：

---

0x00 Default 默认值 与内置变量

$width:15px;
$width:25px!default;
@debug $width;

$width:25px!default 表示如果$width的值之前没有定义或者为null，那么就使用25px

0x01 内置变量

内置变量就是系统内置模块中的变量

例如：数学模块

@use "sass:math";
@debug math.$pi;

内置变量禁止修改

0x02 内置模块别名

写法一：

@use "sass:math" as m;
@debug m.$pi;

写法二：

@use "sass:math" as *;
@debug $pi;

当别名起为*的时候，使用时就可以省略别名

0x03 变量的作用域

大部分语言的作用域 是因为函数代码段的产生而产生的。

能通用的说法是：作用域因代码段花括号的产生而产生

sass中变量的作用域的有两种不同模式的代码段可以影响到变量的局部和全局

1.能够输出css样式的代码段

例如：mixin区块，css规则区块、function区块、%占位规则可以影响变量作用域

2.流程控制代码段

if、each、for、while

#css规则代码段

1.全局变量 在 花括号中 仍然适用

证明：

$a:10
body{
    @debug:$a;
}

2.局部变量局部优先

即局部作用域中局部变量覆盖同名全局变量，但是无法影响到花括号外

证明：

$a:10;
body{
    $a:20;
    @debug $a;
}
@debug $a;

除非将局部变量强制声明为全局变量

$a:10;
body{
    $a:20!global;
    @debug $a;
}
@debug $a;

!global 声明的局部变量必须在外部定义过

不能用！global来直接定义变量。

例如:可以这样写：

$a:null;
body{
    $a:20!global;
    @debug $a;
}
@debug $a;

 

#流程控制代码段

流程控制代码段里面如果定义了一个和外面同名的变量则会影响到外面

证明：

$a:10;
$cond:true;

@if $cond{
    $a:20;
    @debug $a;
}
@debug $a;

注意，必须先定义外面的全局变量

如果没有定义外边的全局变量，在里面直接定义变量，则只能在里面访问

这个变量，如果在外面访问该变量则会报错

错误写法：

总结：

外边有变量，里面的同名变量会影响外边

外边没有变量，里面的变量只能在里面使用，不能在外边使用

0x04 高级变量功能

#变量判断函数

1.meta.variable-exists()

判断变量是否存在

2.meta.global_variable-exists()

判断全局变量是否存在

@use "sass:meta";
$a:10;
@debug meta.variable-exists("b");

#从对象中取值

map.get(对象，属性)

@use "sass:map";
$theme-color:(
    "success":#28a745,
    "info":#17a2b8,
    "warning":#ffc107,
);

.alert{
    background-color:map.get($theme-colors,"warning");
}

这是一种语言设计的思维：让变量的使用更加明显和好区分,为了避免不好维护，

所以没有涉及 $theme-color-#{info}

0x05插值使用：

1.用在css选择器上

.img-#{$name}{

}

2.用在属性上

.img-red{

background-#{$color}:$color;

}

3.用在值上面

.img-red{

background:$color;

}

插值只返回没有加双引号的值,即插值会将双引号屏蔽掉。

这是因为插值可以用在属性名上，属性名上显然不能有双引号。

并且属性名和选择器上只能用插值，不能直接用变量！

证明：

$color:"red";

body{
	color:$color;
	background:#{$color};
}

body {
  color: "red";
  background: red;
}

3.并且双引号中的变量只有加上插值才会被作为变量解析：

证明：

$color:"red";

body{
	color:"i like $color";
	background:"i like #{$color}";
        font-size:"i don't like "+$color;
}

body {
  color: "i like $color";
  background: "i like red";
  font-size: "i don't like red";
}

替代方案：字符串拼接,不推荐

注意：

虽然可以用插值表达式来将带引号的字符串转化为不带引号的字符串

但是使用string.unquote()函数要清晰的多，而不是#{$string}

建议写成string.unquote($string)

@use "sass:string";
$name:"15px";
body{
	font-size:string.unquote($name);
}

官方推荐的东西一定要多用！因为官方不喜欢的东西就极有可能在下一次升级被淘汰！