使用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來控制圖片顯示的區域。 為什么要使用雪碧圖 ...