sass制作雪碧图


站长推荐:程序员必备10TBJava大数据机器学习人工智能从入门到精通视频教程下载


1、配置文件config.rb

http_path = "../../../"
css_dir = "Content/css"
sass_dir = "Content/sass"
images_dir = "Content/images"
#css_dir = "Components/Table"
#sass_dir = "Components/Table"
#images_dir = "Components/Table"
javascripts_dir = "Scripts"

http_path + images_dir为生成雪碧图的地址

2、在对应的sass文件中

//生成雪碧图
$images-spacing: 10
$images
-clean-up: true
// 加载compass sprites模块
@import "compass/utilities/sprites"
// 导入icon目录下所有png图片
@import "icon/*.png"
// 输出所有的雪碧图css
@include all-icon-sprites

直接设定images_dir下的文件夹所有的png图片

3、单个sass样式的

.hex-iconAdd
@include icon
-sprite("add_w")
add_w是图片名, icon-sprite这单词不加s

4、生成的css

 

本站声明
本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。


 
© 2014-2018 ITdaan.com 粤ICP备14056181号