compass之sprite初接觸

jsdt 發布于2019-08-28 17:51 / 3116人閱讀

摘要：的就是讓一個文件夾下的所有自動合并成一個臨時的大圖。所有必須是非交錯的，否則會報沒有屬性的錯誤，非交錯就是用保存的時候，會有的選項搜索了一天，發現沒辦法同時合并多個文件夾到一個圖片上。

compass的sprite就是讓一個文件夾下的所有icon自動合并成一個臨時的大圖。

所有icon必須是非交錯的png，否則會報沒有unpack屬性的錯誤，非交錯就是用ps保存png的時候，會有

的選項
搜索了一天，發現沒辦法同時合并多個文件夾到一個圖片上。https://github.com/chriseppstein/compass/issues/800

基本設置
比如目前my-icons有4張圖片
images/my-icons/new.png
images/my-icons/edit.png
images/my-icons/save.png
images/my-icons/delete.png
然后在scss文件中

@import "compass/utilities/sprites";
@import "my-icons/*.png";
@include all-my-icons-sprites;

就可以用.my-icons-delete使用delete的背景圖片

或者可以用這種

@import "my-icons/*.png";

.actions {
  .new    { @include my-icons-sprite(new);    }
  .edit   { @include my-icons-sprite(edit);   }
  .save   { @include my-icons-sprite(save);   }
  .delete { @include my-icons-sprite(delete); }
}

這樣看起來更舒服點

選項
- $-spacing合成圖片之間的margin e.g $icon-spacing: 20px
- $-repeat背景圖片的重復like $icon-repeat: repeat-x
- $-position背景定位，比如100%，就是把圖片都往右邊靠，寬度為最大的那張
- $-clean-up是否在每次創建新的圖片時，刪去舊的圖片
- $-sprite-dimensions
$-sprite-base-class
$--spacing
$--repeat
$--position
沒明白什么用

有組成方式的選項
選項必須放在該import前面
$[map]-layout屬性有Vertical(default,豎著放),Horizontal(橫著放),Diagonal(從右上到左下),Smart(緊湊)
e.g $[map]-layout:smart;會把圖片都緊湊的壓在一起，測試該選項會導致$-spacing失效

比如要給一個a加入4種狀態時候的圖片，e.g
icons:
my-buttons/glossy.png
my-buttons/glossy_hover.png
my-buttons/glossy_active.png
my-buttons/glossy_target.png

@import "my-buttons/*.png";

a {
  @include my-buttons-sprite(glossy)
}

a標簽就自動獲得4個狀態的樣式
要關閉這個功能在include前面加$disable-magic-sprite-selectors:true;

云服務器 GPU云服務器 compass -sprite -sprites Sprites

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110846.html

使用compass自動合并css雪碧圖(css sprite)

摘要：使用雪碧圖，能夠減少頁面的請求數降低圖片占用的字節，以此來達到提升頁面訪問速度的目的。也正是因為這一點，導致很多開發者懶于使用雪碧圖。本文就介紹下怎樣使用來自動合并雪碧圖。生成的每個雪碧圖默認的規則是目錄名圖片名。 css雪碧圖又叫css精靈或css sprite，是一種背景圖片的拼合技術。使用css雪碧圖，能夠減少頁面的請求數、降低圖片占用的字節，以此來達到提升頁面訪問速度的目的。但...

劉永祥 2019-08-28 18:06 評論0 收藏0
Sass & Compass 初步使用

摘要：一需安裝的東西自帶可能被墻查看安裝情況查看的可參考資料如何安裝，使用鏡像二實操使用終端進入選定的目錄初始化編寫針對可能用到的命令可能用到的命令針對進入到特定目錄后，輸入命令方式方式，會創建一個以命名的目錄是目錄的配置文件，可根據個人一、需安裝的東西 ruby（mac自帶） gem（sources可能被墻） sass compass 查看安裝情況： ruby -v gem -v s...

boredream 2019-08-30 15:52 評論0 收藏0
Compass創建者Chris Eppstein：真正的CSS框架是如何工作的

摘要：當我的補丁被拒絕了之后，我想要指出一個方向真正的框架是如何工作的。發起這項捐助有我的個人原因在里面，我的父親在年被確診為患有一種罕見的成年人形式的線粒體疾病。正是一個經歷了如此過程的產品。非商業轉載請注明作譯者、出處，并保留本文的原始鏈接：http://www.ituring.com.cn/article/120792 Chris Eppstein，Compass框架的創建...

BigTomato 2019-08-28 18:01 評論0 收藏0
postcss-lazysprite: 一種生成CSS 雪碧圖的懶惰姿勢

摘要：無論是早期工具，還是現在流行的配合這類構建工具而產生的雪碧圖插件。本文原文鏈接：https://devework.com/postcss-...，轉載請注明原始來源，謝謝！ showImg(https://segmentfault.com/img/bVPmaC?w=1692&h=754); postcss-lazysprite 是一個基于PostCSS 開發的用于生成雪碧圖圖片及其C...

BearyChat 2019-08-29 12:48 評論0 收藏0
寫給初入門/半路出家的前端er

摘要：半路出家的前端程序員應該不在少數，我也是其中之一。年，馮馮同事兼師兄看我寫太費勁，跟我說對面樓在找，問我要不要學，說出來可能有點丟人，但是在那之前，我真得不知道什么是，什么是。半路出家的前端程序員應該不在少數，我也是其中之一。為何會走向前端非計算機專業的我，畢業之后，就職于一家電力行業公司，做過設備調試、部門助理、測試，也寫過一段時間的QT，那三年的時間，最難過的不是工作忙不忙，...

Cc_2011 2019-08-23 17:18 評論0 收藏0