Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/33.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 指南针:生成精灵,加上精灵中每个图像的宽度/高度_Css_Css Sprites_Compass Sass_Sass - Fatal编程技术网

Css 指南针:生成精灵,加上精灵中每个图像的宽度/高度

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

我正在使用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;
}

.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