Css 指南针:生成精灵,加上精灵中每个图像的宽度/高度
我正在使用Compass(一个CSS框架)生成sprite图像。 它可以工作,但指南针只为每个图像生成一个背景位置 是否可以获得精灵中每个图像的宽度和高度 这是我的代码:Css 指南针:生成精灵,加上精灵中每个图像的宽度/高度,css,css-sprites,compass-sass,sass,Css,Css Sprites,Compass Sass,Sass,我正在使用Compass(一个CSS框架)生成sprite图像。 它可以工作,但指南针只为每个图像生成一个背景位置 是否可以获得精灵中每个图像的宽度和高度 这是我的代码: @import "ico/*.png"; @include all-ico-sprites; 生成的代码: .ico-sprite, .ico-bag-blue, .ico-bag-black { background: url('../images/ico-s78b1a1919b.png') no-repeat; }
@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;
}
谁能解释一下我是怎么做到的?
谢谢。我找到了解决办法。
只需传递true作为第二个参数:
@include all-ico-sprites(true);
非常简单。这项工作:
@include all-<map>-sprites(true);
将true
发送到all include works,但由于它没有文档记录,因此配置变量似乎是首选方法
除了尺寸之外,还有其他可用的配置变量:
$<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
$-间距//精灵周围以px为单位的空间
$-repeat//是否重复精灵背景
$-position//精灵在地图上的x位置
$-sprite基类//基类(默认值为“-sprite”)
$-clean-up//是否删除旧图像映射
$--间距//间距,用于单个精灵
$--repeat//repeat,针对单个精灵
$--位置//位置,用于单个精灵
无论我通过什么基类,它都会抛出一个错误。这个配置选项现在似乎已经坏掉了。其他的,比如“-layout”现在也存在了——请看清楚,顺序反映在结果中@导入“ico/*png”应位于实际f*ck的$-property之后。。。救了我一天。非常感谢。有没有办法在全局范围内为这些设置默认值?A$sprite维度: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