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

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

WBOY

リリース： 2016-06-21 08:52:00

オリジナル

1422 人が閲覧しました

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が正しくインストールされているか確認してください。正しい場合は、新しいプロジェクト
<🎜 で、対応するバージョンステータス
```
ruby -vsass -vcompass -v
```
ログイン後にコピー

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
< を直接実行することもできます。 🎜>

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中新建多个文件夹保存原始的图片；

ログイン後にコピー

pic1.png

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

ログイン後にコピー