[B! compass] koba04のブックマーク

Sache: Find Sass and Compass Extensions for your next project

Discover Sass & Compass Extensions Find the perfect tool for your next Sass or Compass project. Add Your Own

koba04 2014/03/24

Sass and Compass Extensions

sass
compass

リンク

compassでcssスプライトするときの出力をできるだけ少なくする試み - しるてく

概要 Sprite layouts | Compass Documentation compassでのcssスプライトを試してみたのでメモ。 sprite-backgroundっていうmixinは結構色々な人がブログに書いてるんだけど、retina対応していなかったり、無駄な処理が入っていたりしてなんかしっくりこなかったので自分で実装してみた。完成品以下のファイルは使い回せるので、mixins/_sprite.scssみたいにプロジェクトに依存しないファイルとして置いておく。 @mixin sprite-background-size($name, $sprites, $device-pixel-ratio: 2) { $_width: image-width(sprite-file($sprites, $name)) / $device-pixel-ratio; $_height:

koba04 2013/07/17

compass

リンク

パフォーマンスから考えるSass/Compassの導入・運用

- The document discusses the introduction and use of Sass and Compass for a large-scale e-commerce site. - Key aspects covered include using Sass features like nesting, mixins, extends and @import to organize CSS, Compass features like sprite generation and creating a style guide. - The results of adopting Sass/Compass included improved development speed and a 40% increase in site traffic over 4 m

koba04 2013/05/08

compass
sass

リンク

コーダー必見、SCSS・Compassで開発効率アップ｜便利なCSS Sprite実装編 | DevelopersIO

はじめに今回から「すぐに使えるSCSS入門シリーズ」からタイトルを変えてSCSS・Compassを使ったコーダー向け開発効率アップテクニックを紹介していきます（シリーズは続きます）。今回作成したサンプルこのサンプルはgithubで配布しています。ダウンロードしてソースなどご確認ください。動作するHTMLサンプルはこちらです。 CSS Spriteって？ CSS Spriteについてお復習いです。簡単に言うと画像をくっつけてCSSのbackgroud-positionで表示を制御するテクニックです。 CSS Spriteのメリット画像をくっつけることによってHTTPリクエスト数の削減マウスオーバーなどで表示を切り替えるがスムーズ（個別に画像を読み込んでいる場合、切り替わったときに読み込みが発生します） CSSのみでボタンなどのアフォーダンスを切り替えることができる CSS Sp