前端重构Sass的相关使用（笔记二）

最新推荐文章于 2025-09-12 14:39:04 发布

weixin_34162228

最新推荐文章于 2025-09-12 14:39:04 发布

阅读量85

点赞数

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/blackagenl/p/4316762.html

本文介绍如何利用Sass与Compass自动化生成雪碧图，减少HTTP请求，提高网页加载速度。通过简单的配置即可自动生成CSS代码，简化前端开发流程。

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

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

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

创建工程请执行 compass create app

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

@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文件。

通过观察，我们不难发现，原来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 点击下载

转载于:https://www.cnblogs.com/blackagenl/p/4316762.html