指南针：生成精灵，并在精灵中的每个图像上加上宽度/高度

CSS

Eva古一

2020-03-20

我正在使用Compass（一个CSS框架）生成子画面图像。它可以工作，但是指南针仅为每个图像生成一个背景位置。

是否可以同时获取子画面中每个图像的宽度和高度？

这是我的代码：

@import "ico/*.png";
@include all-ico-sprites;

生成的代码：

.ico-sprite, .ico-bag-blue, .ico-bag-black {
  background: url('../images/ico-s78b1a1919b.png') no-repeat;
}

.ico-bag-blue {
  background-position: 0 0;
}

.ico-bag-black {
  background-position: 0 -24px;
}

和我想要的代码：

.ico-sprite, .ico-bag-blue, .ico-bag-black {
  background: url('../images/ico-s78b1a1919b.png') no-repeat;
}

.ico-bag-blue {
  background-position: 0 0;
  width:40px;
  height:24px;
}

.ico-bag-black {
  background-position: 0 -24px;
  width:44px;
  height:30px;
}

谁能向我解释我该怎么做？谢谢。

第2508篇《指南针：生成精灵，并在精灵中的每个图像上加上宽度/高度》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
DavaidTony宝儿 2020.03.20

我找到了解决方案。只需将true作为第二个参数传递：

@include all-ico-sprites(true);

很简单。

NearGreen 2020.03.20

这有效：

@include all-<map>-sprites(true);

但是您可能要考虑使用配置变量的书面方法：http :
//compass-style.org/help/tutorials/spriting/

您只需在导入之前指定config变量即可。在您的情况下：

$ico-sprite-dimensions: true;
@import "ico/*png".
@include all-ico-sprites;

true全部发送包括的作品，但由于未记录在案，因此似乎首选配置变量。

除了尺寸外，还有其他可用的配置变量：

$<map>-spacing           // space in px around the sprites
$<map>-repeat            // whether to repeat the sprite bg
$<map>-position          // the x position of the sprite on the map
$<map>-sprite-base-class // the base class (default ".<map>-sprite")
$<map>-clean-up          // whether to delete old image maps
$<map>-<sprite>-spacing  // spacing, for individual sprites
$<map>-<sprite>-repeat   // repeat, for individual sprites
$<map>-<sprite>-position // position, for individual sprites

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android