我正在使用SASS创建css,并希望其他开发人员可以通过更改sass变量来创建自定义css。当我在我的基本文件中使用这样的单个变量时,这很好用:
$text-color: #000 !default;
要测试覆盖,我创建一个新项目,首先声明变量的覆盖,然后导入“base”sass文件。
$text-color: #0074b;
@import "base-file";
但是我还想使用地图进行配置,但是我没有让覆盖工作。我该如何使用可以覆盖的配置图?
$colors: (text-color: #000, icon-color: #ccc );
在#000之后添加!default会给我一个编译错误:expected ")", was "!default,")
在!之后添加!default不会出错,但变量也不会被覆盖。
关于我做错的任何想法?
答案 0 :(得分:8)
我不认为您想要的功能存在于标准Sass中。我建立了这个功能虽然这可以满足您的要求:
//A function for filling in a map variable with default values
@function defaultTo($mapVariable, $defaultMap){
//if it's a map, treat each setting in the map seperately
@if (type-of($defaultMap) == 'map' ){
$finalParams: $mapVariable;
// We iterate over each property of the defaultMap
@each $key, $value in $defaultMap {
// If the variable map does not have the associative key
@if (not map-has-key($mapVariable, $key)) {
// add it to finalParams
$finalParams: map-merge($finalParams, ($key : $value));
}
}
@return $finalParams;
//Throw an error message if not a map
} @else {
@error 'The defaultTo function only works for Sass maps';
}
}
<强>用法:强>
$map: defaultTo($map, (
key1 : value1,
key2 : value2
));
然后,如果你有一个mixin的东西,你可以做这样的事情:
@mixin someMixin($settings: ()){
$settings: defaultTo($settings, (
background: white,
text: black
);
background: map-get($settings, background);
color: map-get($settings, text);
}
.element {
@include someMixin((text: blue));
}
输出的CSS:
.element { background: white; color: blue; }
所以你会根据你在问题中所说的那样使用它:
$colors: defaultTo($colors, (
text-color: #000,
icon-color: #ccc,
));
答案 1 :(得分:1)
Bootstrap已通过以下方式解决了此问题:
$grays: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$grays: map-merge(
(
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
),
$grays
);
https://github.com/twbs/bootstrap/blob/v4.1.3/scss/_variables.scss#L23