使用Compass制作雪碧图
遇见好的文章，笔者也会转载。但是正所谓好记性不如烂笔头，单纯的拿来主义也不如自己的亲自实践。所以每次需要转载的文章，我都会自己敲一遍，中间加入一些自己的思考。 这篇文章转载自：http://www.hongkiat.com/blog/compass ...
原文：使用sass与compass合并雪碧图(一)
雪碧图就是很多张小图片合并成一张大图片，以减少HTTP请求，从而提升加载速度。有很多软件可以合并雪碧图，但通常不太容易维护，使用compass生成雪碧图应该算是非常方便的方法了，可以轻松的生成雪碧图，而且易维护。 安装sass与compass 安装sass可以参考这里。 安装完sass以后，使用下面命令安装compass: 配置环境 进入项目目录，使用下面命令初始化项目： 该命令会在当前目录中生成 ...
2015-08-29 21:55 2 2256 推荐指数：
相关推荐
SmartSprites 智能批量合并 CSS 雪碧图
做前端的稍微有点经验的都知道 可以通过合并小图片 来减少请求数， 最早可能都是通过 fw、ps 等工具来手动合并， 这种方式的缺点就不吐槽了，效率低，可维护性差 等等 .... 一些很厉害的人，往往会开发出很厉害的程序，来解决重复性的劳动， 1. https ...
webpack使用雪碧图插件
1.先安装插件 2.配置webpack 配置之前 先引入var SpritesmithPlugin = require('webpack-spritesmith'); 在webpack.co ...
安装Ruby、Sass与Compass
sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!） window下安装SASS首先需要安装Ruby，先从官网下载Ruby并安装。安装过程中请注意勾选Add Ruby executables to your PATH添加到 ...
Sass和Compass入门
一./*背景知识*/ 1.Sass是什么？ Sass可以简化你的Css工作流，并可以使你的Css的扩展和维护工作变的更加容易！例如，曾几时何，因为客户的需求的变更，你必须不断的通过查找和替换来更改一个像素值，或者，为了能够确定多栏布局中某一栏的宽度，你需要使用计算像素值软件才能搞定 ...
CSS雪碧图（精灵图）使用
1：CSS雪碧图：CSS雪碧图 即 CSS Sprites，也有人叫它CSS精灵图。 2：雪碧图的由来：一个网站的页面需要大量的小图片或者小图标，但是大量的图片如果放在服务器上，每次当打开网站并且向服务器发送请求，那么请求的次数将大大增加。由此出现了雪碧图的概念 3：用处：是一种 ...
雪碧图
1.块级元素水平和垂直居中的方法。 水平居中（margin:0 auto;） 水平居中（text-align：center;） 这个属性在没有浮动的情况下，我们可以将其转换为inline/i ...
雪碧图
雪碧图（Sprites） 雪碧图也叫CSS精灵， 是一种CSS图像合成技术，就是将许多小图标合并在一张背景透明的图片上，使用background-position和background-size来控制图片显示的区域。 为什么要使用雪碧图 ...