sass中!default和!global的作用
我们写css时，可能!default和!global这两个标志并不会被用到，但我们在看别人的项目时，可能就会遇到这两个标志。所以，我们还是应该把它们搞明白的。
那它们有什么作用呢？
!global
!global通常被用在Mixin和function中，它能使定义在mixin或function中的变量变为全局变量。
$var: red; @mixin foo($var: $var) { default-color: $var; $var: green; //局部变量，变量$var被设为green；在局部作用域中，$var都会被设为green scoped-color: $var; } .bar { @include foo; color: $var; } 复制代码上述代码会被编译成：
.bar { default-color: red; scoped-color: green; color: red; } 复制代码若在mixin foo中，$var添加一个!global标志，那么$var会变为全局变量。此时，全局变量$var不会影响局部作用中的$var。
$var: red; @mixin foo($var: $var) { default-color: $var; $var: green !global; //局部变量，变量$var被设为green；在局部作用域中，$var都会被设为green scoped-color: $var; } .bar { @include foo; color: $var; } 复制代码上述代码会被编译成：
.bar { default-color: red; scoped-color: red; color: green; } 复制代码!default
!default被添加在变量值的后面，表示当前值为变量的默认值，和javascript中函数参数的默认值是一样的。
如果一个变量被分配了默认值，那么你可以直接使用默认值，也可以重新为它赋值。
为变量重新赋值后，上下文中的该变量将会被重写为新值。
没有为变量重新赋值时，那么上下文中的该变量将会赋予默认值。
!default在自定义样式时非常有用。
//mixin.scss $border-position-all: all !default; $border-default-size: 1px !default; $border-default-pattern: solid !default; $border-default-color: $black !default; @mixin add-border($border-position: $border-position-all, $border-size: $border-default-size, $border-pattern: $border-default-pattern, $border-color: $border-default-color) { @if $border-position == $border-position-all { border: $border-size $border-pattern $border-color; } @else { border-#{$border-position}: $border-size $border-pattern $border-color; } } //------------------------------------------------------------------------------------------- $border-default-pattern: dotted; $border-default-color: red; @import "mixin.scss"; .block-border { @include add-border($border-size: 2px); } 复制代码上面的代码将会被编译成：
.block-border { border: 2px dotted red }
作者：JC.彦
链接：https://juejin.cn/post/7045162753807515655
玩站网免费分享SEO网站优化 技术及文章 伪原创工具 https://www.237it.com/