コンパスを使用してスプライトを作成する image_html/css_WEB-ITnose

良い記事に出会った場合、著者も転載させていただきます。しかし、ことわざにあるように、良い記憶力は悪い文章ほど良くはなく、単に教義を使用するだけでは、それを自分で実践するほど良くありません。そのため、記事を転載する必要があるたびに、私はそれを自分でタイプし、自分の考えをいくつか追加します。
この記事は以下から転載されています: http://www.hongkiat.com/blog/compass-image-sprite/
著者 Thoriq Firdaus
翻訳者 zEx

フロントエンドのパフォーマンスの最適化は常にフロントエンドの非常に重要な部分ですその中で、静的リソース、特に画像の最適化が大きな割合を占めます。画像の最適化にはさまざまな方法がありますが、その中でも非常に基本的でよく使用されるのがスプライト画像です。
CSS スプライトは、HTTP リクエストを削減し、Web サイトの読み込みパフォーマンスを向上させるために、複数の画像を 1 つの画像に結合する方法です。 PS で手動でつなぎ合わせる従来の方法に加えて、この作業を完了するのに役立つ簡単な Web サイトやツールもいくつかあります。
ここで、著者は Compass のスプライト機能を使用することを強く推奨します。次に、この方法の利点を見てみましょう。

Compassのインストール

Compassを使用するには、まずそれをインストールする必要があります。ここでもう 1 つ言っておきますが、Compass と SASS の関係は、jQuery と JavaScript の関係に似ています。 SASS は Ruby 環境に基づいているため、次の手順を実行します。

注: 特定の SASS 使用方法を検索してください。

Compass の使用を開始します

Compass を使用する前に、Compass プロジェクトを作成し、それを監視する必要があります。このようにして、このプロジェクトに含まれる画像と scss ファイルが変更されると、Compass はそれらを適切な形式に自動的にコンパイルします。

コマンドラインターミナルを開き、次のコマンドを入力します。

compass create /path/to/projectcd /path/to/projectcompass watch

画像を結合

images/browsers/ フォルダーに XXX.png という名前のアイコン画像がいくつかあります

これらのアイコンを Compass に追加するには、.scss ファイルで @import 構文を使用して画像を指定できますフォルダー 以下の拡張子が png のすべての画像。次のように:

@import "browers/*.png";

ファイルを保存した後、Compass はこれらの画像を結合し、次のように新しい画像ファイルを生成します:

スプライトの表示方向

さらに、次のようにスプライトの配置の方向を設定することもできます。画像のスクリーンショットを見ましたが、デフォルトでは画像は縦向きです。垂直方向の配置では要件を満たせない場合は、$

$broswers-layout:horizontal;@import "browsers/*.png";

$broswers-layout:diagonal;@import "browsers/*.png";

スタイルシートへの画像の追加

画像を結合したら、スタイルシートに背景画像を追加します。従来のアプローチを使用できます:

.chrome { background-position: 0 0; width: 128px; height: 128px;}   .firefox { background-position: 0 -133px; width: 128px; height: 128px;}   .ie { background-position: 0 -266px; width: 128px; height: 128px;}   .opera { background-position: 0 -399px; width: 128px; height: 128px;}   .safari { background-position: 0 -532px; width: 128px; height: 128px;}   

Compass では、より簡単な方法を使用します。まず、@include all-

@include all-browsers-sprites

上記を通常の CSS にコンパイルすると、背景画像の宣言に加えて、以下に示すように、対応する場所もあります:

.browsers-sprite, .browsers-chrome, .browsers-firefox, .browsers-ie, .browsers-opera, .browsers-safari { background: url('/images/browsers-sad8e949931.png') no-repeat;}  .browsers-chrome { background-position: 0 0;}  .browsers-firefox { background-position: 0 -128px;}  .browsers-ie { background-position: 0 -256px;}  .browsers-opera { background-position: 0 -384px;}  .browsers-safari { background-position: 0 -512px;}  

または、 @include

コンテナのサイズを指定します

最後に行う必要があるのは、背景画像を表示する必要があるコンテナの幅と高さの属性を指定することです。私たちの従来のアプローチは、画像の幅と高さを手動でチェックすることです (ほとんどの場合、これは画像情報または画像属性を表示することで取得されます)。

Compass を使用すると、-sprite-height(image-name) 関数または

上記のコードをコンパイルすると、以下の通常の CSS に変換されます。

.browsers-sprite, li { background: url('/images/browsers-sad8e949931.png') no-repeat;}  li { display: inline-block; height: 128px; width: 128px; background-position: 0 -512px;} 

结论

通过上面的例子，相信读者都已经明白了Compass制作雪碧图的方便之处。实际上，Compass除了这些创建CSS雪碧图的基本函数，Compass还有很多有用的函数可以使用。

英文出处：http://www.hongkiat.com/blog/compass-image-sprite/

中文译文：http://www.w3cplus.com/preprocessor/compass-image-sprite.html