当使用 compass 的 Sprite 生成器时,生成器会根据像素创建 CSS 规则。
示例代码:
@import 'compass/utilities/sprites';
$sprite-2-layout: horizontal;
@import "sections/anatomy-sprite-test/sprite-2/*.png";
@include all-sprite-2-sprites;
$sprite-3-layout: horizontal;
@import "sections/anatomy-sprite-test/sprite-3/*.png";
@include all-sprite-3-sprites;
$sprite-4-layout: horizontal;
@import "sections/anatomy-sprite-test/sprite-4/*.png";
@include all-sprite-4-sprites;
示例输出:
/* line 84, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/utilities/sprites/_base.scss */
.sprite-2-00 {
background-position: 0 0;
}
/* line 84, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/utilities/sprites/_base.scss */
.sprite-2-00 {
background-position: -244px 0;
}
是否有一种方法可以以百分比形式生成这些值,以便能够响应地使用它们?
我自己编写了它,但在某些浏览器中效果不佳。这是我的方法:
@mixin sprite-percentage-step-generate($steps, $single_image_width) {
$total_image_width: ($single_image_width * $steps) - $single_image_width;
background-position: 0 0;
img {
display: none;
}
@for $i from 0 through ($steps - 1) {
$step_width: $i * $single_image_width;
&.step-#{$i} {
background-position: percentage(($step_width / $total_image_width)) 0;
// We include these to see the relation between the percentage and the step count
img {
display: none;
}
}
}
}
也许这不是一个好主意,因为生成器可能会进行一些特殊类型的优化,以便基于像素的方法效果最好?
问题又是:有没有办法让 Compass 生成 CSS,其中 Sprite 的位置生成为百分比而不是像素?
最佳答案
最后的解决办法是让所有的百分比都没有小数位或者1位小数。这在所有浏览器中都能完美运行。
对于具有奇怪数量的图像的 Sprite (让我澄清一下,这些 Sprite 的宽度都相同),解决方案是使图像更大。例如,如果图像有 17 张幻灯片,则可以将图像扩展为模拟 25 张,从而创建浏览器正确呈现的百分比。
关于responsive-design - compass :以百分比形式导出 Sprite 位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25769103/