前端重构Sass的相关使用(笔记二)

Sass 使用中有一个 Amazing 的功能,配合着 compass 能够做出非常多高效的工作,首当其冲的就是自动化雪碧图工具。

雪碧图自然不用多说,做过前端的开发都知道雪碧图。好处呢在于能够大大节约网络的开销,把Http请求降低。自然在原来的前端开发中,制作的成本也是偏高。环境安装请看这里?http://www.html-js.com/article/CSS-solves-the-installation-and-debugging-of-SASSCompass-scheme

环境Ok之后,通过命令确认安装完毕。

1

创建工程请执行 compass create app

2

Compass自动为我们生成了相关的文件目录。好吧,开搞!进入项目目录,运行 compass watch 来实施监控文件发生的变化。实施编译Sass。 之后写入这样的代码段。

1
@import "compass/reset";
//通过在SASS文件中使用import来自动生成雪碧图
/*
 首先声明布局模式4种
 vertical   垂直
 horizontal 水平
 diagonal   对角线
 smart      智能排列
 */
 $toolbar-layout: 'smart';
//包含的文件夹路径
@import "../images/icons/*.png";
//混合宏sprites,COMPASS内置方法,能够通过文件名
//来生成相应的CSS代码片段
@include all-icons-sprites;

@mixin icon-base($icon_name){
	display: inline-block;
	margin: 10px;
	text-indent: -9999px;
	@include icons-sprite($icon_name);
}

//图标iphone
.iphone_icon{
	width: 256px;
	height: 256px;
	@include icon-base(iphone);
}
//图标B
.login_icon{
	width: 100px;
	height: 25px;
	display: block;
	@include icon-base(login);
}

然后他会根据规则生成响应的Css文件。
2

通过观察,我们不难发现,原来image文件中的文件名,就是class样式中的名字,规则是根据 “文件夹-文件”这样的规则生成。

这样应用起来是不是很快呢?

这种写法一个需要注意的地方就是在于文件夹和文件的放置位置。SASS生成的代码完全是根据文件夹和文件的位置决定的。更好的规划图片当然能够获得更加易读的代码。比如:


Image根目录
  |___ icon
  		|____ icona.png
		|____ iconb.png
  |___ banner
  		|_____ a.png
		|_____ b.png

对应的Sass语法则是


@include all-icons-sprites;
@include all-banner-sprites;
//在这里我们使用B
div{
	@include banner-sprite(a);
}

源代码和注释已上传,有需要的朋友可以下载研究。

sass-demo 点击下载

发表评论

电子邮件地址不会被公开。 必填项已用*标注