Sass变量的默认范围

变量 CSS

Mandy村村

2020-03-24

我在跨范围的Sass中使用变量默认值时遇到问题。我的测试示例是:

@mixin foo { 
        $val: 'red' !default; 
        .bar { 
                color: $val; 
        } 

} 

@include foo; 
.class1 { 
        $val: 'green'; 
        @include foo; 
        .class11 { 
                @include foo; 
        } 
} 

$val: 'black'; 
.class2 { 
        @include foo; 
} 

.class3 { 
        $val: 'blue'; 
        @include foo; 
} 

.class4 { 
        @include foo; 

}

它编译为:

.bar { 
  color: "red"; 

} 

.class1 .bar { 
  color: "red"; 
} 

.class1 .class11 .bar { 
  color: "red"; 
} 

.class2 .bar { 
  color: "black"; 
} 

.class3 .bar { 
  color: "blue"; 
} 

.class4 .bar { 
  color: "blue"; 

}

如您所见,变量$ val在mixin foo中定义为'red'!default。我希望导入mixin会将$ val设置为“ red”,除非已经定义。但是,在class1中,$ val在本地定义为“绿色”,导入mixin foo会将其替换为“红色”。在其他类中,在将$ val全局定义为“黑色”之后,导入mixin可以按预期进行,并且$ val保留其已定义的值。

我究竟做错了什么?

第3722篇《Sass变量的默认范围》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android