scientre https://blog.hatena.ne.jp/scientre/ メモ用紙 https://scientre.hateblo.jp/ CSS / Less 多数の小さな画像を 1 枚の画像の上に並べ、CSS で切り分けることにより、サーバへの問い合わせの回数を減らして Web ページの表示を高速化する CSS スプライトと呼ばれる手法がある。これまで Sass + Compass ではできていたが、Grunt をはじめとする自動化ツールが充実してきたおかげで LESS でも可能になった。 あらかじめ Grunt と grunt-spritesmith をインストールし設定しておく。方法は先日の記事を参照。 Grunt を使って LESS のコンパイル環境を作る grunt-spritesmith を Mac (OS X Mavericks) にイ… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fscientre.hateblo.jp%2Fentry%2F20131212%2Fgrunt_spritesmith_with_less" title="grunt-spritesmith を使って LESS でもスプライト画像を自動生成する - メモ用紙" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/s/scientre/20131212/20131212180226.png Hatena Blog https://hatena.blog 2013-12-12 00:00:00 rich https://scientre.hateblo.jp/entry/20131212/grunt_spritesmith_with_less 1.0 100%