How to rewrite SASS map-merge, map-get in LESS

Question

Can you help me to write some code for create sprite template in Less via gulp spritesmith?

I have sprite.template.mustache with Sass functions and mixins:

$icons: (0:0)
{{#items}} 
$icons: map-merge($icons,({{name}}: (X: {{px.offset_x}}, Y:{{px.offset_y}}, W: {{px.width}}, H: {{px.height}}, TW: {{px.total_width}}, TH: {{px.total_height}}, IMG: '{{{escaped_image}}}')))
{{/items}}

{{#options.functions}}
// Gets an attribute from the sass map
@function icon-attr($icon, $attr)
    $icon: map-get($icons, $icon)
    @return map-get($icon, $attr)
@mixin sprite($iconName) 
    background-image: url(icon-attr($iconName, IMG))
    width: icon-attr($iconName, W)
    height: icon-attr($iconName, H)
    background-position: icon-attr($iconName, X) icon-attr($iconName, Y)
@mixin sprite-position($iconName)
    background-position: icon-attr($iconName, X) icon-attr($iconName, Y)
@mixin sprite-retina($iconName)
    background-image: url(icon-attr($iconName, IMG))
    $width: icon-attr($iconName, W)
    $height: icon-attr($iconName, H)
    width: $width/2
    height: $height/2
    $x: icon-attr($iconName, X)
    $y: icon-attr($iconName, Y)
    background-position: $x/2 $y/2
    $tw: icon-attr($iconName, TW)   
    $th: icon-attr($iconName, TH)
    background-size: $tw/2 $th/2    

{{/options.functions}}

I have some trouble with rewriting functions: "map-merge" and "map-get" to Less.

I know that there are no such functions in LESS, but I also know that there are own arrays that can be configured.

Start with the [`lists`](http://lesscss.org/usage/#plugins-list-of-less-plugins) plugin and then ask about specific trouble you face (everything is possible but a lot of concepts in the given snippet have to be rethought from scratch to adapt to Less specific structures). — seven-phases-max, Oct 23 '17 at 18:16
I took a deeper look into what this code actually does and ... see my answer below. — seven-phases-max, Oct 24 '17 at 13:28

score 0 · Answer 1 · edited Aug 22 '18 at 22:52

For a complex map-like data structures manipulation see Lists Less plugin.

But for this particular snippet you don't in fact need any complex structures and thus extra plugins/functions. Plain mixins can serve as a map and its functions in this case just perfect. Minimal illustrative example:

// declare icon map, each item is injected via {{#items}} template:

.icon(foo) {
    @x: 11;
    @y: 22;
    // etc.
}

.icon(bar) {
    @x: 33;
    @y: 44;
    // etc.
}

// using the map:

.sprite-retina(@icon-name) {
    // expand icon properties into this scope:
    .icon(@icon-name); 
    // use the propertes:
    x: @x;
    y: @y;
    // etc.
}

Thank you, you helped me a lot. I started thinking about the implementation using mixins too, but the working version was not there yet. With your help, I did what I wanted. — Макс Киригетов, Oct 25 '17 at 06:44

score 0 · Answer 2 · answered Oct 25 '17 at 06:50

Here is the result that I got:

{{#items}}
    @{{name}}: {{px.offset_x}}, {{px.offset_y}}, {{px.width}}, {{px.height}}, {{px.total_width}}, {{px.total_height}}, '{{{escaped_image}}}';
{{/items}}

// @{{name}} - name of the img.

{{#options.functions}}
.icon-attr(@icon){
    @url: extract(@icon, 7);
    @width: extract(@icon, 3);
    @height: extract(@icon, 4);
    @positionX: extract(@icon, 1);
    @positionY: extract(@icon, 2);
    @total_width: extract(@icon, 5);
    @total_height: extract(@icon, 6);
}

{{/options.functions}}

.sprite(@icon){
    .icon-attr(@icon);
    display: inline-block;
    background-image: url(@url);
    width: @width;
    height: @height;
    background-position: @positionX @positionY;
}

.sprite-position(@icon){
    .icon-attr(@icon);
    background-position: @positionX @positionY;
}

.sprite-retina(@icon){
    .icon-attr(@icon);
    background-image: url(@url);
    @width_retina: @width;
    @height_retina: @height;
    width: @width_retina/2;
    height: @height_retina/2;
    @x: @positionX;
    @y: @positionY;
    background-position: @x/2 @y/2;
    @tw: @total_width;
    @th: @total_height;
    background-size: @tw/2 @th/2;
}

Example of use:

.icon-search {
  .sprite(@search);
}

How to rewrite SASS map-merge, map-get in LESS

2 Answers2