Question

我正在使用Compass生成CSS sprites。

我找到了一种定义精灵的方法，并在不同的.scss文件中使用它，但我不确定这是否是正确的解决方案。

直到现在我能找到的最佳方式是：

创建_variables.scss部分文件
在_variables.scss部分文件
导入每个.scss文件中的_variables.scss部分

示例

_variables.scss文件：

$siteSprite-spacing: 20px; 
@import "siteSprite/*.png";

firstPage.scss文件：

@import "../variables.scss";

.close {
    @include siteSprite-sprite(close, true);
}

secondPage.scss文件：

@import "../variables.scss";

.viewMore {
    @include siteSprite-sprite(arrow, true);
}

这有效，但是......

问题是每次Compass编译scss文件（firstPage.scss，secondPage.scss）时，它会读取_variables.scss部分，然后读取所有图像，每次尝试生成精灵。

结果是 compile 进程以此结束：

   create generated_images/siteSprite-s526a535d08.png
unchanged generated_images/siteSprite-s526a535d08.png
   create css/firstPage.css 
unchanged generated_images/siteSprite-s526a535d08.png
   create css/secondPage.css
unchanged generated_images/siteSprite-s526a535d08.png
   create css/thirdPage.css
unchanged generated_images/siteSprite-s526a535d08.png

这非常慢，因为我在siteSprite图像文件夹中有很多页面和许多文件。

我该如何避免这个问题？

Answer 1

我将解释如何使用指南针精灵，希望这对你也有帮助。我通常会创建一个_base.scss部分文件，其中我将所有通用@ import和@include以及任何通用css代码放入我的项目中。在_base.scss中我还添加了以下特定于sprite的代码（假设我保留图标的文件夹称为“icon”，并且我的图标的扩展名为.png）：

@import "compass/utilities/sprites";
@import "icon/*.png";
@include all-icon-sprites;

这个_base.scss是我在我项目的任何* .css.scss文件（相当于你的“firstPage.scss”和“firstPage.scss”）中导入的第一个文件。

现在，要在div中使用这些精灵中的任何一个，我就这样做：

#my_id (or .my_class) {
    @extend .icon-myicon;
}

其中“myicon”是“icon”文件夹中一个.png文件的名称。

此compass tutorial实际上非常有用，所以您可能需要查看。

如果您担心某些文件可能最终导入多次，您可以尝试使用插件compass-import-once。

在不同的样式表中使用相同的Compass精灵

1 个答案: