成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

compass之sprite初接觸

jsdt / 3128人閱讀

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

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

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

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

基本設(shè)置
比如目前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); }
}

這樣看起來更舒服點(diǎn)

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

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

比如要給一個a加入4種狀態(tài)時候的圖片，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標(biāo)簽就自動獲得4個狀態(tài)的樣式
要關(guān)閉這個功能在include前面加$disable-magic-sprite-selectors:true;

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/110846.html

相關(guān)文章

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

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

    劉永祥 評論0 收藏0

  • Sass & Compass 初步使用

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

    boredream 評論0 收藏0

  • Compass創(chuàng)建者Chris Eppstein：真正的CSS框架是如何工作的

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

    BigTomato 評論0 收藏0

  • postcss-lazysprite: 一種生成CSS 雪碧圖的懶惰姿勢

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

    BearyChat 評論0 收藏0

  • 寫給初入門/半路出家的前端er

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

    Cc_2011 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<