Sunday 15 May 2011

Creating a sass map value from within a mixin - saved globally -



Creating a sass map value from within a mixin - saved globally -

this question has reply here:

how assign global variable in sass? 2 answers

is possible update value in sass map within mixin alter saved globally?

eg

$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 init value true } .test-2 { @include set($obj); // init value has been set true }

i'm not sure if understood trying do, code seems fine (haven't tested though), excepting there no map-set function, can create 1 or utilize map-merge (check here: http://oddbird.net/2013/10/19/map-merge/). hope helps.

@update 1: think got question now, want pass reference through mixin, if have multiple maps, can send 1 want update mixin, don't think possible though, because no reference kept, if need update variable have link straight it, exemple, works (tested):

$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);

but if reference $map instead of $obj (in line $obj: map-set($map, init, true) !global;), new global map (called $map), created. , every time phone call mixin again, replaced map sent parameter.

@update 2: found way it, have maintain global 'map of maps', , every time update guy, send name of map want update parameter, came next code, it's tested , working fine :)

@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

source: myself

sass

No comments:

Post a Comment