compass模块----Utilities----Sprites精灵图合图

时间:2023-03-08 16:33:52
compass模块----Utilities----Sprites精灵图合图

css雪碧图又叫css精灵或css sprite,是一种背景图片的拼合技术。使用css雪碧图,能够减少页面的请求数、降低图片占用的字节,以此来达到提升页面访问速度的目的。但是它也有令人诟病的地方,就是拼图和后期维护的成本比较大。也正是因为这一点,导致很多开发者懒于使用css雪碧图。

配置compass项目

$ compass init

会生成相应的目录和配置文件。在images目录下建立logo目录存放需合并的图标。项目目录结构如下:

- sass
|-- icons.scss
|-- screen.scss
- stylesheet
- images
|-- logo

config.rb 文件配置如下:

 http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts" relative_assets = true // 使用相对目录
line_comments = false // 关闭行注释

合并雪碧图

输出所有雪碧图样式

新建一个文件icons.scss,在screen.scss中引入icons.scss。

在icons.scss里面引入sprites: @import "compass/utilities/sprites"

images文件里子目录logo:把所有图片放到这里。(方便将来将其和其他图片区分开来)

icons.scss文件里将logo文件引入进来: @import "logo/*.png"; (*引入logo目录下的所有文件)。

 @import "compass/utilities/sprites";    // 加载compass sprites模块
@import "share/*.png"; // 导入share目录下所有png图片
@include all-share-sprites; // 输出所有的雪碧图css

生成的代码中 .logo-sprite 是雪碧图的基础类生成的每个雪碧图默认的class规则是: .目录名-图片名 。

调用单个雪碧图样式

 @import "compass/utilities/sprites";    // 加载compass sprites模块
@import "share/*.png"; // 导入logo目录下所有png图片
.main-logo{
@include logo-sprite("img1");
}

编译后的css为:

 .logo-sprite, .main-logo {
background-image: url('../images/logo-sd097a30ac3.png');
background-repeat: no-repeat;
}
.main-logo {
background-position: 0 0;
}

利用魔术精灵选择器智能输出

比如hoveractivefocustarget等。利用compass的魔术精灵选择器我们就可以智能的合并各状态的图标,并输出对应的css。使用时,我们需要将图标按照一定的规则命名。例如:

img1.png            // 默认状态图标
img1_hover.png // hover状态图标
img1_active.png // active状态图标

编译后的css为:

 .logo-sprite, .main-logo {
background-image: url('../images/logo-sd097a30ac3.png');
background-repeat: no-repeat;
}
.main-logo {
background-position: 0 0;
}
.main-logo:hover, .main-logo.img1-hover {
background-position: -120px 0;
}
.main-logo:active, .main-logo.img1-active {
background-position: -60px 0;
}

调出隐藏的logo.scss命令行:

compass sprite 'images/logo/*.png'

$logo-sprite-dimensions:用来控制输出CSS的时候是否根据图片大小对我们的相应类名css属性添加一个宽和高。
$logo-layout:修改合图布局方式。

  --默认是垂直 horizontal水平的。

  --diagonal斜对角线布局的。

  --smart节省空间布局

 $logo-sprite-dimensions: true;
$logo-layout: horizontal;