オンラインPC館

SCSS

SCSSによるSpriteの生成

SCSSとCompassを利用すれば、ローカル上でSprite画像とCSSコードを生成する事ができます。
これならCSS Spriteのデメリットである更新の手間が軽減されるので、条件を問わず様々な画像に対して利用する事ができます。
メタ言語とは
Sassとは
SCSSとは

Rubyのポータブル活用

SCSSの環境は一度構築すれば、移動しても使用するPCにパスを通すだけでそのまま使う事ができます。
このためUSBメディアに入れて持ち運んでも活用する事ができます。

Rubyのアップデート方法

Ruby（7z版）のアップデートは手動でフォルダ内容を上書きするだけです。
使用環境の変更やRubyの仕様変更などがなければ、特に再設定を行う必要はありません。
Ruby 2.6.0-preview2 Released
Ruby 2.5.1 リリース

SCSSの環境構築（ポータブル対応）

SCSSの環境構築

最初にRubyをダウンロードして環境を構築します。
Rubyはインストール版とアーカイブ版があるので、使い勝手の良いアーカイブ版を使用します。
SCSSテクニック

ポータブル版のRubyをダウンロードする→適当な場所に解凍する

パスの通し方

パスの通し方は以下の通りです。

  1. スタート（右クリック）→設定→システム→バージョン情報→システムの詳細設定→環境変数→Path→編集→新規
  2. 解凍したRubyフォルダ\binのパスを追加する

gemのアップデートとCompassのインストール

Rubyをインストールしたら、gemのアップデートとCompassのインストールを行います。

  1. スタート（右クリック）→ファイル名を指定して実行→cmd
  2. cd Rubyフォルダ\binのパス
  3. 次の2つを左から順に実行：「gem update --system」「gem install compass」

DevKitとOily PNGのインストール

Oily PNGはPNG生成を高速化する事ができるので、最初に入れておきます。
ただし、Oily PNGを利用するためには、DevKitもインストールする必要があります。

  1. DevKitをダウンロードしてインストール
  2. インストール先は「Rubyフォルダ\DevKit」などを指定
  3. スタート（右クリック）→ファイル名を指定して実行→cmd
  4. cd DevKitのパス
  5. 次の4つを左から順に実行：「ruby dk.rb init」「ruby dk.rb review」「ruby dk.rb install」「gem install oily_png」

作業フォルダにファイルを生成

インストールが完了したら、作業対象にするフォルダを指定して基本的なファイルを生成します。

  1. スタート（右クリック）→ファイル名を指定して実行→cmd
  2. cd 作業フォルダのパス
  3. 「compass create」を実行

SCSSの初期設定

SCSSの基本設定

SCSSの基本設定は「config.rb」を編集して行いますが、後から変更する事もできます。
ディレクトリ名は単にわかりやすく変更するだけで、オプションは必要なものだけ追加してください。

作業フォルダ内にある「config.rb」をエディタで開く

ディレクトリ名の変更

config.rbのディレクトリ名の変更方法です。

css_dir = "stylesheets" → "css"
sass_dir = "sass" → "scss"
images_dir = "images" → "img"
javascripts_dir = "javascripts" → "js"

オプション設定

config.rbのオプション設定です。

  1. relative_assets = true（「相対パス」で記述したい場合はこの行を上記の下に追加）
  2. line_comments = false（「コメント」を付加しない場合はこの行を上記の下に追加）
  3. output_style = :compressed（「改行とコメント」を全て削除する場合はこの行を上記の下に追加）

SCSSの設定方法

SCSSの設定方法

基本的な初期設定ができたら、画像をセッティングしてscssファイルを作成します。
また、出力されるファイルの内容や条件をより詳細に指定する事もできます。

画像のセッティング

画像ファイルのセッティング方法です。

  1. Sprite作成前の元画像を入れるフォルダの作成：作業フォルダ→img→target
  2. 作成したフォルダに、結合したい画像を全てコピーする
  3. 注意点：結合前の元画像はSpriteの再作成時に利用するため、別の場所に保管しておく必要がある

scssファイルの作成

scssファイルの作成方法です。

  1. scssファイルの作成：作業フォルダ→scss→sprite.scss
  2. 作成したscssファイルをエディタで開く
  3. 文字コードを「UTF-8」に変更する
  4. 以下の内容を記述

@charset "utf-8";
@import "compass";
$target-sprite-dimensions:true;
@import "target/*.元画像のファイル形式";
@include all-target-sprites;

Compassの実行方法

コンパイル

準備ができたら対応したコマンドを打つ事で、コンパイルされてSprite（画像、CSS）が各フォルダ内に生成されます。
また、毎回手動で行うのが面倒な場合は、以下のようにbatファイルを作成すると便利です。

  1. スタート（右クリック）→ファイル名を指定して実行→cmd→以下のコマンドを打つ
  2. cd 作業フォルダのパス
  3. 生成だけなら「compass compile」、監視させるなら「compass w」

コンパイル用batファイル

コンパイル用batファイルの作成方法です。

  1. 作業フォルダ内にcompile.batを作成
  2. 作成したbatファイルをエディタで開いて以下のどちらかを記述
  3. 生成用（compass compile）、監視用（compass w）
  4. batファイルをダブルクリックで実行
オンラインPC館