如何在LESS中重写SASS map-merge、map-get答案

【问题标题】：How to rewrite SASS map-merge, map-get in LESS如何在LESS中重写SASS map-merge、map-get
【发布时间】：2018-04-04 04:22:40
【问题描述】：

你能帮我写一些代码来通过 gulp spritesmith 在 Less 中创建精灵模板吗？

我有带有 Sass 函数和 mixins 的 sprite.template.mustache：

$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}}

我在重写函数时遇到了一些麻烦：“map-merge”和“map-get”到 Less。

我知道LESS中没有这样的功能，但我也知道有自己的数组可以配置。

【问题讨论】：

从 lists 插件开始，然后询问您面临的具体问题（一切皆有可能，但必须从头开始重新考虑给定 sn-p 中的许多概念以适应不太具体的结构)。
好的，谢谢，我试试
我更深入地研究了这段代码的实际作用，并......请参阅下面的答案。

标签： sass gulp less gulp-less gulp-spritesmith

【解决方案1】：

有关复杂的类似地图的数据结构操作，请参阅Lists Less 插件。

但是对于这个特殊的 sn-p，您实际上不需要任何复杂的结构，因此不需要额外的插件/功能。普通的 mixins 可以用作地图，在这种情况下它的功能非常完美。最小的说明性示例：

// 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.
}

【讨论】：

谢谢你，你帮了我很多。我也开始考虑使用 mixins 来实现，但还没有工作版本。在你的帮助下，我做了我想做的事。

【解决方案2】：

这是我得到的结果：

{{#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;
}

使用示例：

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

【讨论】：