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

前端之家收集整理的这篇文章主要介绍了在不同的样式表中使用相同的Compass精灵前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用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部分,然后读取所有图像,每次尝试生成精灵.

结果是编译过程最终结果如下:

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图像文件夹中有很多页面和许多文件.

我该如何避免这个问题?

解决方法

我将解释如何使用指南针精灵,希望这对你也有帮助.
我通常会创建一个_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.

原文链接:https://www.f2er.com/css/215735.html

猜你在找的CSS相关文章