コンパスはスプライトを自動生成しますimages_html/css_WEB-ITnose

Web ページ上のリクエストの数を減らすために、通常、多くのアイコンを 1 つの大きな画像につなぎ合わせ、背景と背景の位置を通じて要素の表示を制御します。しかし、スプライト イメージを結合し、スプライト イメージ内で後続の特定の要素の位置を決定することは非常に面倒であり、不正確です。今日は簡単な方法を紹介しましょう。この方法を使用すると、スプライシングのワークロードが大きい場合、フロントエンドの作業が大幅に軽減され、ピクセルの違いがなく、非常に正確になります。

1. 環境設定

• ruby
• sass

  gem install sass

  しかし、よく報告されます:

  gem 在国内的镜像不能用Could not find a valid gem 'sass' (>= 0), here is why:      Unable to download data from https://rubygems.org/ - Errno::E...

  それでは、タオバオのイメージを使用して以下を実行してみましょう操作:

  gem sources --remove https://rubygems.org/gem sources -a https://ruby.taobao.org/gem sources -l*** CURRENT SOURCES ***https://ruby.taobao.org按照步骤进行就行，之后再进行如下命令：sudo gem install sass

• compass

  sudo gem install compass

• 上記のruby、sass、compassが正しくインストールされているか確認してください。正しい場合は、新しいプロジェクト

2.compass プロジェクト

• を確認できます。 >

  compass init

  は、初期化が成功したことを示す次の内容をコマンド ラインに出力します:

  directory sass/ directory stylesheets/  create config.rb  create sass/screen.scss  create sass/print.scss  create sass/ie.scss   write stylesheets/ie.css  write stylesheets/print.css  write stylesheets/screen.cssCongratulations! Your compass project has been created.

• また、ディレクトリ内で compass create compass-test

コンパスプロジェクト構成ファイル config.rb を表示します

• require 'compass/import-once/activate'# Require any additional compass plugins here.# Set this to the root of your project when deployed:http_path = "/"css_dir = "stylesheets"sass_dir = "sass"images_dir = "images"javascripts_dir = "javascripts"# You can select your preferred output style here (can be overridden via the command line):# output_style = :expanded or :nested or :compact or :compressed# To enable relative paths to assets via compass helper functions. Uncomment:# relative_assets = true  // 使用相对目录# To disable debugging comments that display the original location of your selectors. Uncomment:# line_comments = false //关闭行注释# If you prefer the indented syntax, you might want to regenerate this# project again passing --syntax sass, or you can uncomment this:# preferred_syntax = :sass# and then run:# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

接合するアイコンを準備します

• 根据config.rb中的设置，我们需要将图片放在images文件夹下所以，我们先在项目根目录下新建一个images文件夹，比如我们现在项目㓟多个模块，每个模块需要对应一个雪碧图，那么我们在images中新建多个文件夹保存原始的图片；

ここで、共有モジュールがあり、その共有モジュールには結合する必要がある 2 つの背景画像があるとします。

• pic1.png

共有モジュールの場合、sass フォルダーの下に share.scss という名前の新しいモジュールを作成します。内容は次のとおりです:

• @import "compass/utilities/sprites";    // 加载compass sprites模块@import "share/*.png";                    // 导入share目录下所有png图片@include all-share-sprites;                // 输出所有的雪碧图css

ルート ディレクトリで

• コマンドが正常に実行されると、images フォルダーに share で始まるファイルを生成できます。たとえば、私のファイルは share-s0876535d58.png です。

  compass compile

pic2.png

同時に、スタイルシート フォルダーに新しく生成された share.css ファイルが次の内容で表示されます。 :

これで、スプライト画像を生成するためのコンパスの基本的な操作が完了しました。この方法を使用すると、スプライシングの作業負荷が大きい場合に、フロントエンドの作業が大幅に軽減され、ピクセルの差がなくなり、非常に正確になります。