如何重写SASS映射合并，映射得到更少

你能帮我写一些代码，通过GulpSpriteSmith用更少的语言创建精灵模板吗

我有sprite.template.mustache和Sass函数和mixin：

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

我在重写函数时遇到了一些麻烦：“映射合并”和“映射获取”到更少

---

我知道LESS中没有这样的函数，但我也知道可以配置自己的阵列。

有关复杂的地图式数据结构操作，请参阅LESS插件

但是对于这个特定的代码片段，实际上您不需要任何复杂的结构，因此也不需要额外的插件/函数。简单的mixin可以用作映射，在这种情况下，它的功能非常完美。 最简单的示例：

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

---

对于复杂的地图式数据结构操作，请参阅Less plugin

但是对于这个特定的代码片段，实际上您不需要任何复杂的结构，因此也不需要额外的插件/函数。简单的mixin可以用作映射，在这种情况下，它的功能非常完美。 最简单的示例：

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

---

以下是我得到的结果：

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

---

以下是我得到的结果：

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

---

从插件开始，然后询问您面临的具体问题（一切都是可能的，但给定代码片段中的许多概念必须从头开始重新思考，以适应不太具体的结构）。好的，谢谢，我将尝试深入了解这段代码的实际功能，并。。。请参阅下面我的答案。从插件开始，然后询问您面临的具体问题（一切都有可能，但给定代码段中的许多概念必须从头开始重新思考，以适应不太具体的结构）。好的，谢谢，我将尝试更深入地了解这段代码的实际功能，并。。。请看下面我的答案。谢谢你，你帮了我很多。我也开始考虑使用mixin的实现，但是工作版本还没有出现。有你的帮助，我做了我想做的。谢谢你，你帮了我很多。我也开始考虑使用mixin的实现，但是工作版本还没有出现。在你的帮助下，我做了我想做的事。