Responsive design 指南针:将精灵位置导出为百分比

Responsive design 指南针:将精灵位置导出为百分比,responsive-design,sass,compass-sass,compass,Responsive Design,Sass,Compass Sass,Compass,使用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/anat

使用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,其中精灵的位置是以百分比而不是像素的形式生成的

最后,解决方案是使所有百分比都没有小数点或小数点后1位。这在所有浏览器中都能很好地工作


对于具有奇怪数量图像的精灵(让我澄清一下,这些精灵的宽度都相同),解决方案是将图像放大。例如,如果图像有17张幻灯片,则可以将图像扩展为模拟25张幻灯片,从而创建浏览器正确渲染的百分比

你认为这将如何工作?无法将像素转换为百分比。以百分比表示的“背景位置”属性是相对于元素的,而不是相对于图像的。你需要先考虑如何使用纯CSS获得想要的结果,然后再询问如何使用Sass。我不理解这种混淆。我已经有了这个作品的一个版本(我自己写的),它很有效。这样做的原因是,如果您知道单个图像的宽度和每个精灵的步数,您可以将该背景图像的大小设置为百分比,然后将
background-position-x
设置为百分比。有什么问题吗?无需将像素转换为百分比。为了更直接地回答您的问题,使用
background-position-x
是基于将
background size
设置为此精灵中的步数(我忘了提到所有图像的宽度相同)。如果“在某些浏览器中无法正常工作”,这可能是你不应该这样做的一个明确的迹象。我百分之百同意你。也许,我不该这么做。我们同意,但问题是:1。这到底为什么行不通呢?2.有没有什么可能的办法来解决这个问题?我知道这不是默认的指南针功能,也可能不是它的预期用途。