Sass, Compass の導入 – リボン日記

目的

DreamWeaver などのエディタで、Sass, Compass の自動コンパイルを使えるようにする。

背景

DreamWeaver のCompass コンパイルを使おうとすると、予期せぬ振る舞いでCSS書き出しディレクトリを指定できなかった

参考：DreamWeaver CC を使いWordPress テーマ内でCompass のコンパイルが正常にできなかった

Windows でSass とCompass を使う

SassとCompassのインストールの方法

Ruby をインストールする
Ruby をダウンロードしてインストール
https://rubyinstaller.org/downloads/

Ruby 2.x.x-x (x64) – Windows が64bit の場合
Ruby 2.x.x-x (x86) – Windows が32bit の場合

インストールの際、オプションの「Rubyの実行ファイルへ環境変数PATHを設定する」にチェックを入れるのを忘れずに。

コマンドプロンプトを立ち上げる
[Windows]キーを押して、”cmd”と入力
gem のバージョン確認

>gem -v
2.7.4

1 2	>gem -v 2.7.4

バージョンが出力される

>gem update --system

1	>gem update --system

アップデートが始まる

Sass とCompass をインストール

 gem install sass
 gem install compass

1 2	gem install sass gem install compass

インストールが終わったらバージョンを確認する

>sass -v
Sass 3.5.4 (Bleeding Edge)
>compass -v
Compass 1.0.3 (Polaris)
Copyright (c) 2008-2018 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

>sass -v

Sass 3.5.4 (Bleeding Edge)

>compass -v

Compass 1.0.3 (Polaris)

Released under the MIT License.

Compass is charityware.

Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

バージョンの確認ができれば、インストール済みだと分かる。
※compass のインストールで、新しすぎるruby だとインストールできないエラーが起きた。
この場合、Ruby を一旦アンインストールし、1つ前のバージョンをインストールして試す。

WordPress インストール済みのディレクトリ構造

wordpress
└wp-content
　└mytheme
　　├config.rb //Compass の設定ファイル
　　├compass_start.bat Sass //ファイルを監視して、Compass を自動でコンパイルするバッチファイル
　　├style.css // WordPress テーマのスタイルシート、ここに書き出す
　　├scss
　　├images
　　└js

wordpress

└wp-content

　└mytheme

　　├config.rb //Compass の設定ファイル

　　├compass_start.bat Sass //ファイルを監視して、Compass を自動でコンパイルするバッチファイル

　　├style.css // WordPress テーマのスタイルシート、ここに書き出す

　　├scss

　　├images

　　└js

“config.rb”, “compass_start.bat” はこのあと作成する。

Compass の初期設定

コマンドプロンプトで、Sass, Compass を作成するディレクトリに移動する
面倒なら、エクスプローラーを開いて、該当するテーマのフォルダを開き、アドレスバーを選択(ショートカット[Alt+D])して”cmd”と入力

コマンドプロンプトで次のように入力

>compass create

1	>compass create

実行すると、次のようなファイルが作成される。

mytheme
├config.rb
├sass
│├ie.scss
│├print.scss
│└screen.scss
└stylesheets
  ├ie.css
  ├print.css
  └screen.css

mytheme

├config.rb

├sass

│├ie.scss

│├print.scss

│└screen.scss

└stylesheets

├ie.css

├print.css

└screen.css

“sass”, “stylesheets” のフォルダは今回使わないため、エクスプローラーから削除しておく。

ツールを使って書き出される、デフォルトの設定

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

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

これを、WordPress テーマ内の構造に合わせて書き換える

config.rb の記述

 http_path = "/"
 css_dir = "."
 sass_dir = "scss"
 images_dir = "images"
 javascripts_dir = "js"

http_path = "/"

css_dir = "."

sass_dir = "scss"

images_dir = "images"

javascripts_dir = "js"

CSS はテーマ直下のstyle.css として書き出す

compass_start.bat の設定

メモ帳などのエディタを開いて、下記を記述。

 compass w

compass w

ファイルを保存するとき、テーマ内のフォルダを指定、”compass_start.bat”と名付けて保存
ただし、エクスプローラーで確認すると”compass_start.bat.txt” のようにテキストファイルの拡張子がついていることがあるため、ファイル名の”.txt”を削除

ランチャーを使っている場合、compass_start.bat はランチャーに登録しておく

動作テスト

compass_start.bat を実行
コマンドプロンプトが立ち上がって、監視が始まる

C:\xampp\htdocs\wordpress\wp-content\themes\mytheme&gt;compass w
&gt;&gt;&gt; Compass is watching for changes. Press Ctrl-C to Stop.

1 2	C:\xampp\htdocs\wordpress\wp-content\themes\mytheme>compass w >>> Compass is watching for changes. Press Ctrl-C to Stop.

scss/test.scss を作成
試しにCSS を書く

 .test {color:red}

1	.test {color:red}

ファイルを保存するとコマンドプロンプトにコンパイルの結果が表示される

 modified scss/test.scss
   write test.css

1 2	modified scss/test.scss write test.css

書き出しが成功したら、テーマ直下に”test.css” が出力される
compass_start.bat の監視を終了するには、コマンドプロンプトで[Ctrl+C]を押した後のあと”y”と入力して[Enter]を押す

scss/style.scss を作成、WordPress のテーマ設定コメントが消えないようにする

 /*
 Theme Name: mytheme
 Description:  わたし のブログ
 Version: 0.1
 Author: Ed_CREATE
 Author URI: http://sakuranomichi.jp/
 */

Theme Name: mytheme

Description: わたしのブログ

Version: 0.1

Author: Ed_CREATE

Author URI: http://sakuranomichi.jp/

これを

 /*!
 Theme Name: mytheme
 Description:  わたし のブログ
 Version: 0.1
 Author: Ed_CREATE
 Author URI: http://sakuranomichi.jp/
 */

/*!