Question

你能帮我在Less via gulp spritesmith中为create sprite模板编写一些代码吗？

我有sprite.template.mustache，包含Sass函数和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}}

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

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

Answer 1

对于复杂的类似地图的数据结构操作，请参阅Lists Less plugin。

但是对于这个特定的片段，你实际上并不需要任何复杂的结构，因而需要额外的插件/功能。普通混合可以作为地图，在这种情况下它的功能是完美的。最小的说明性示例：

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

Answer 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);
}

如何重写SASS map-merge，map-get in LESS

2 个答案: