compass sprite
2015-07-14 10:13
246 查看
1、compass init 初始化一个compass项目,并创建一个images文件夹用来存放合成的sprite图
2、将切好的小图放到images文件夹中
3、在sass文件夹中新建一个test.scss的文件并写入
4、sass编译后会输出如下css
其它配置:
1、输出布局,默认输出的雪碧图是按各个图片,垂直排列的。Compass 提供了:
2、控制间距,为每个图片加入间距,此处指定为10px
3、自动获取当前图片的尺寸
4、手动指定类名
编译后生成的css代码
2、将切好的小图放到images文件夹中
3、在sass文件夹中新建一个test.scss的文件并写入
@import "test/*.png"; //导入小图片 @include all-test-sprites; // 这是 compass 定义好的 mixin,一次全部生成 icons 这个文件夹里的所有图片的雪碧图
4、sass编译后会输出如下css
.test-sprite, .test-adv_food, .test-adv_taste, .test-adv_traffic, .test-adv_wifi, .test-hot_tags, .test-icon_100_31, .test-icon_hook, .test-icon_pos, .test-icon_wifi, .test-product_score { background-image: url('/images/test-s61f860e6f4.png'); background-repeat: no-repeat; } .test-adv_food { background-position: 0 0; } .test-adv_taste { background-position: 0 -48px; } .test-adv_traffic { background-position: 0 -95px; } .test-adv_wifi { background-position: 0 -138px; } .test-hot_tags { background-position: 0 -186px; } .test-icon_100_31 { background-position: 0 -208px; } .test-icon_hook { background-position: 0 -239px; } .test-icon_pos { background-position: 0 -255px; } .test-icon_wifi { background-position: 0 -271px; } .test-product_score { background-position: 0 -317px; }
其它配置:
1、输出布局,默认输出的雪碧图是按各个图片,垂直排列的。Compass 提供了:
Vertical,
Horizontal,
Diagonal,
Smart,默认以 Vertical 输出。
$test-layout: smart; // {文件夹名称}-layout
2、控制间距,为每个图片加入间距,此处指定为10px
$test-spacing:10px
3、自动获取当前图片的尺寸
$test-sprite-dimensions:true; //默认是false
4、手动指定类名
@import "test/*.png"; .wifi-test{ //指定图片为icon_wifi的类名 @include test-sprite(icon_wifi); }
编译后生成的css代码
.test-sprite, .wifi-test { background-image: url('/images/test-s61f860e6f4.png'); background-repeat: no-repeat; } .wifi-test { background-position: 0 -271px; }
相关文章推荐
- 水题 CodeForces 137A Postcards and photos
- JNI笔记
- Android中使用GSON包解析JSON数据(简单JSON)
- Android Studio 快捷键
- osm文件导入PostGIS
- 悟空学Linux专栏----第35篇
- SpringMVC实战(三种映射处理器)
- zf-关于差旅报销的excel表单填写
- android padding和margin的区别
- 检测密码强度
- 通过产品ID或者SKU获取产品相关信息(ShortDescription、Name、Price、ProductUrl、ImageUrl)
- struts jxl导出Excel
- 气候变迁给社会带来什么变化?
- 贪心 CodeForces 137B Permutation
- Android主activity向自定义view传递参数
- 悟空学Linux专栏----第34篇
- RROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)
- 如何判断android 网络连接是否可用
- Altium Designer 3D封装下载及导入教程
- java 异常处理机制及说明。