SCSSの追加処理

画像ファイルの追加処理

画像ファイルのリサイズやフォーマット変換などの追加処理を行う方法です。
ImageMagickの使い方

画像ファイルの最適化

画像ファイルの最適化を行う方法です。
pngquantの使い方
PNGOUTの使い方
mozjpegの使い方

CSSファイルの文字列置換

CSSファイルの文字列置換を行う方法です。
文字列置換の使い方

不要ファイルの削除

以下のファイルはSprite作成時に生成されるファイルで、削除しても特に問題はありません。
生成後にこれらのゴミが残る場合は、以下のようにbatファイルを作成すると簡単に削除する事ができます。
ただし、オリジナルの元画像は次回のSprite作成時に再利用するため、別途保管しておく必要があります。

@echo off
rd /s /q ".sass-cacheのパス"
del /q "imgフォルダのパス\*.画像のファイル形式"
del /q "targetフォルダのパス\*.画像のファイル形式"
del /q "sprite.cssのパス"

一括処理

Sprite画像の生成と上記追加処理を連携させて1クリックで一括処理する方法です。

@echo off
call "compile.batのパス"
cd "追加処理のbatのあるフォルダのパス"
call "追加処理のbat"
cd "削除batがあるフォルダのパス"
call "削除bat"

SCSSのファイル管理

ファイルの管理方法

以下はSprite作成時に利用するフォルダです。
ファイラーを使えばこれら複数のフォルダを一括で開く事ができるので、ファイル管理が非常に楽になります。
Tablacus Explorerの使い方

  1. 元画像の保管フォルダ:元画像を保管している場所
  2. 作業フォルダ→img→target:Sprite作成用にセットする元画像用のフォルダ
  3. 作業フォルダ→img:生成されたSprite用の画像
  4. 作業フォルダ→css:生成されたSprite用のCSS
  5. ホームページのローカルフォルダ:CSSファイルの保存先
  6. ホームページのローカルフォルダ→画像フォルダ:画像ファイルの保存先

ファイラーの使い分け

通常の画像を最適化したいと言う場合は、複数のファイラーを設定しておけばSprite用と画像最適化用で使い分ける事もできます。
Tablacus Explorer

  1. デスクトップなど:画像の置き場所
  2. 作業フォルダ→img:最適化する際の画像の置き場所

SCSSのトラブル対策

コンパイルエラーで処理できない場合

エラーが出てコンパイルできない時は、一度結合前の画像ファイルやファイル名をチェックしてみてください。
大抵は画像ファイルに問題があると生成時にエラーが出るので、このあたりをチェックすると改善する場合があります。
また、scssファイルには生成時の基本的な情報が書かれているので、記述内容が間違っているとエラーになります。

画像ファイルやscssファイルを修正、ファイル名を修正

オンラインPC館
トップページテクニックウェブ制作 → SCSSテクニック