从宽度转换为背景宽度in Less在CSS类中的精灵

我是高级CSS的新手，我一直在关注使用gruntjs，spritesmith和less生成精灵的this tutorial。我被困在如何解决以下问题。首先，我生成一个.less文件，其中包含Sprite中每个图像的信息。它看起来是这样的：从宽度转换为背景宽度in Less在CSS类中的精灵

@mobile_logout-x: 1586px; 
    @mobile_logout-y: 0px; 
    @mobile_logout-offset-x: -1586px; 
    @mobile_logout-offset-y: 0px; 
    @mobile_logout-width: 256px; 
    @mobile_logout-height: 256px;

使用咕噜-的contrib少我现在可以使用以下方法来获取精灵进入我的目标CSS：

减少模板

.mobile_logout { 
    .sprite(@mobile_logout); 
}

结果

.mobile_logout { 
    background-image: url(images-mobile/mobile-sprite.png); 
    background-position: -1586px 0px; 
    width: 256px; 
    height: 256px; 
}

如果我想直接在HTML中使用它，这将会很好，但是我想将它指定为另一个CSS类的一部分。一个例子是：

.myTestButton { 
    background-image: url(images-mobile/mobile-sprite.png); 
    background-position: -1586px 0px; 
    width: 256px; 
    height: 256px; 
    color: white; 
    background-size: 1.3em 1.3em; 
    background-position: top right; 
}

的问题是，在这个阶段，我不能找到一个办法让宽度和高度被表示为背景宽度和背景高度，这就是我期待着去。

我试着改变sprite.less文件中的值来匹配我正在寻找的内容，但发现这是一个无效的黑客。我一直在考虑的另一个选择是使用mixin来返回正确的宽度翻译的项目，但是因为这些都是从较少生成的，所以我无法获得这些。

来源

2013-11-25 Jim

就发布这个我看着精灵功能来自哪里，发现我的答案在生成sprite.less文件后：

.sprite-width(@sprite) { 
    width: ~`"@{sprite}".split(', ')[4]`; 
    } 

    .sprite-height(@sprite) { 
    height: ~`"@{sprite}".split(', ')[5]`; 
    }

的sprite.less文件中生成使用mustache template。为了解决我在Spritesmith中的问题，你可以指定一个小胡子模板。我看着背景宽度也是不正确的，我需要的属性是背景大小。我对内联的尝试也失败了，我应该一直在考虑使用div而不是调整精灵组件的大小。

来源

2013-11-25 16:58:00 Jim

从宽度转换为背景宽度in Less在CSS类中的精灵

回答

相关问题