1.compass init 初始化一个compass项目,并创建一个images文件夹用来存放合成的sprite图 2.将切好的小图放到images文件夹中 3.在sass文件夹中新建一个test.scss的文件并写入 @import "test/*.png"; //导入小图片 @include all-test-sprites; // 这是 compass 定义好的 mixin,一次全部生成 icons 这个文件夹里的所有图片的雪碧图 4.sass编译后会输出如下css .test…

最近开始在尝试开始使用Sass来写CSS代码,刚开始虽然还是不太习惯用链式的方式写css,不过这是暂时的阶段. 如果你还不了解Sass,可以看之前发表过的文章来了解详情,Sass主要有下面这几种特性(主要内容来自这里) 左邊為原始scss檔,右邊為編譯過後的:1.Variables 變數使用$作為開頭當參數 2.Nesting 巢狀結構很清楚的知道 誰是誰的子元素,不用像以前一樣 寫一大排重復的開頭了 3.Mixins 其實就像function一樣使用,還可以帶參數 設定預設參數 4.Inher…

css雪碧图又叫css精灵或css sprite,是一种背景图片的拼合技术.使用css雪碧图,能够减少页面的请求数.降低图片占用的字节,以此来达到提升页面访问速度的目的.但是它也有令人诟病的地方,就是拼图和后期维护的成本比较大.也正是因为这一点,导致很多开发者懒于使用css雪碧图. 配置compass项目 $ compass init 会生成相应的目录和配置文件.在images目录下建立logo目录存放需合并的图标.项目目录结构如下: - sass |-- icons.scss |-- scre…

配置运行环境 Guard,Compass 和 Livereload 是 Ruby 的 Gem 套件,需要 Ruby 运行环境.另外还需要安装 Ruby 的扩展开发包 Development-Kit,以实现 Livereload 的功能和 SASS 的编译.最后需要 Bundler 用于打包 Gem 依赖. 安装 Ruby 下载并安装 Rubyinstaller. 安装过程中勾选相关设置,这样可以直接通过cmd命令行操作(不必手动添加Path). 安装完成后,在 CMD 窗口运行 ruby --v…

对于 现在的 vue . react .webpack 来说也许有点旧了,有时候,越简单的技术越可靠,备份一下 module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), compass: { development: { options: { generatedImagesDir:'public/src/slic…

本文转载自: 使用compass自动合并css雪碧图(css sprite)…

---恢复内容开始--- **简介** CSS SPRITE 即 CSS雪碧,即是将诸多图片合成一张图片,然后使用CSS 的background和background-position属性渲染. 这样做的好处是:减少了网站的HTTP请求次数 **compass如何合并雪碧图** 1. 把需要合并的图片(1.png,2.png,3.png…)放在images文件下的新建一个文件夹test 2. 在SCSS文件中 用 @import 指向这些上述图片们,然后compass会自动将这些图片们合并成一个…

什么是css sprite? css sprite,中文叫雪碧图,也有人喊CSS精灵,就是一种背景拼合的技术,然后通过background-position来显示雪碧图中需要显示的图像. MDN相关链接:https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/CSS_Image_Sprites 优点:1.减少页面请求数 2.降低图片占用字节 缺点:1.拼图麻烦 2.后期维护麻烦 为什么使用compass? 最近项目中需要使用到很多小图片,想用…

1.安装compass.(需要先安装ruby) 命令行:gem install compass 2.新建一个compass 项目 命令行:compass create myproject 3.在myproject中新建一个images文件夹,将需要转换的图片放入images新建的share文件中 并在scss文件中写入: @import "compass/utilities/sprites"; @import "share/*.png"; @include all-…

demo 源码 地址 https://github.com/qqqzhch/webfans 什么是雪碧图? CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. compass 中为我们提供了简洁的工具和方法生成雪碧图 API 在这里 http://compass-style.org/reference/compass/utilities/sprites/ 雪碧图 只须…