是否可以在mixin中更新sass地图中的值,以便全局保存更改?
例如
$obj: (
init: false
)
@mixin set($map) {
@if map-get($obj, init) != true {
// mixin hasn't been called before
$map: map-set($map, init, true);
}
@else {
// mixin has been called before
}
}
.test {
@include set($obj);
// sets the init value to true
}
.test-2 {
@include set($obj);
// init value has already been set to true
}
答案 0 :(得分:0)
我不确定我是否理解你要做的事情,但你的代码看起来很好(虽然没有经过测试),除了没有地图设置功能,但是你可以创建一个或者只需使用map-merge(请点击此处:http://oddbird.net/2013/10/19/map-merge/)。我希望有所帮助。
@update 1:我想我现在得到了你的问题,你想通过mixin传递引用,所以如果你有多个地图,你可以发送你想要更新的地图到mixin,我不认为这是可能的,因为没有引用,如果你需要更新你必须直接链接到它的变量,例如,这工作(测试):
$obj: (
init: false
);
@mixin set($map) {
@if map_get($map, init) != true {
$obj: map-set($map, init, true) !global;
body {
background-color: #000;
}
} @else {
body {
background-color: #ff0000;
}
}
}
@include set($obj);
@include set($obj);
但是如果你引用$ map而不是$ obj (in this line $obj: map-set($map, init, true) !global;)
,那么将创建一个新的全局地图(称为$ map)。每次再次调用mixin时,它将被您作为参数发送的地图替换。
@update 2:我找到了办法,但你必须保留一张全球“地图地图”,每次更新这个人时,都会发送地图名称你想要更新为参数,所以我想出了以下代码,经过测试并正常工作:)
@function map-set($map, $key, $value) {
$new: ($key: $value);
@return map-merge($map, $new);
}
$maps: (
obj1: (
init: false
),
obj2: (
init: false
),
);
@mixin set($prop) {
@if map_get(map_get($maps, $prop), init) != true {
$obj: map-set(map_get($maps, $prop), init, true);
$maps: map-set($maps, $prop, $obj) !global;
body {
background-color: #000;
}
} @else {
body {
background-color: #ff0000;
}
}
}
@include set(obj1); //black
@include set(obj2); //black
@include set(obj1); //red
@include set(obj2); //red
来源:我自己
答案 1 :(得分:0)
来自@Paulo Munoz
这是解决方案
@function map-set($map, $key, $value) {
$new: ($key: $value);
@return map-merge($map, $new);
}
$extend : ();
$obj : (
margin: 0,
padding: 10
);
@mixin set($map, $name) {
@if map-has-key($extend, $name) {
map: has-key;
// call placeholder class
} @else {
$extend: map-set($extend, $name, true) !global;
map: does-not-have-key;
// create placeholder class
// call placeholder class
}
}
.test {
@include set($obj, test);
}
.test-2 {
@include set($obj, test);
}
生成
.test {
map: does-not-have-key;
}
.test-2 {
map: has-key;
}