WEBデザイナー/コーダーでも15分で導入出来るSCSS+Compass
こんにちは、鴨田です。
最近、チラホラとSCSSの記事を見かけるようになり、
どう考えても導入しない理由がないので、始めてみました。
もろもろのインストールから、コーディング開始まで15分もあれば十分ですので、
是非、みな さまも導入してみてください。
筆者、Windows環境なので、Windowsでの導入手順になります。
● Rubyのインストール
SCSS+Compassの動作(コンパイル)環境はRubyなので、
まずはRubyをインストールします。
2013年2月26日現在、最新版は2.0.0なので、こちらをインストールします。
2.0系列ですが、安定版なので、特に問題ありません。
ダウンロード後、インストーラーを起動して、そのまま進めていってください。
途中で一つだけ注意点があります。
保存先とPATHの設定という画面まで来たら、
Rubyの保存先の確認(Cドライブ直下に置くのが嫌な場合は変更してください)と
選択項目中段の「Rubyの実行ファイルへ環境変数PATHを設定する」だけは
チェックするのを忘れないでください。
作業を続けていくと、あっという間にRubyのインストールは完了します。
では、ちゃんとインストールできたかどうかの確認を行います。
「Windowsボタン＋Ｒ」もしくは「スタート→プログラムとファイルの検索」で、
"cmd"と打ち込んで、Enterしてください。
コマンドプロンプトが起動したら、下記コマンドを打ち込んで、Enterキーを押します。
ruby -v
下記、画面のように表示されれば、Rubyがインストールされています。
続けて、Rubyのパッケージ管理システムが最新かどうかのチェックを行います。
gem update --system
最新の状態であれば、下記のように表示されます。
最新でなくても、上記コマンドで最新になりますので、Rubyのインストールはひとまず完了です。
SassとCompassのインストールに移りますが、そのままコマンドプロンプトを使用するので、
ウィンドウは閉じずにいてください。
● SassとCompassインストール
そういえば、ここまで何の説明もなく来てしまいましたが、
SassとかSCSSとかComapssって何？という方もいるかと思いますので、
ちょっとだけ説明をします。
Sassはコンパイル(変換)を行うと、普通のCSSになる言語で、
ミックスイン(機能テンプレートのようなもの？)や変数を扱えたりしますが、
CSSとは似て非なるものなので、少し扱いづらい言語です。
そこでSassの新しい形として誕生したのがSCSSです。
SCSSは、CSSを拡張した文法なので、
(実際のところ、CSSをそのまま書いても問題ない)
学習コストがほぼ必要ない上に、Sassの機能をそのまま使えます。
では、Compassは何なのかというと、
ミックスインのライブラリのようなものでしょうか。
おそらく使っている内に分かってくるのではないかと思いますので、
先に進みましょう。
Sassをインストールします。
gem install sass
Compassをインストールします。
gem install compass
これでSassとCompassのインストールが完了しました。
● Dreamweaverの設定
Dreamweaverを使用していない人は無視して、次の章飛んでください。
Dreamweaverのデフォルト設定では、.scssファイルを正常に認識しないため、
いくつか設定変更を行う必要があります。
■scssファイルをコードビューで開く
ファイル→環境設定→ファイルタイプ/エディタ
「コードビューで開く」に、半角スペース区切りで、".scss"を追加してください。
■scssファイルにコードヒントを適用
Windows7系であれば、下記ファイルをバックアップした上で、編集してください。
C:\Program Files (x86)\Adobe\Adobe Dreamweaver (CS4)\configuration\DocumentTypes
MMDocumentTypes.xml
見つからなければ、Cドライブごと「MMDocumentTypes.xml」で検索してください。
変更前
<documenttype id="CSS" internaltype="Text" winfileextension="css" macfileextension="css" file="Default.css" writebyteordermark="false">
変更後
<documenttype id="CSS" internaltype="Text" winfileextension="css,scss" macfileextension="css,scss" file="Default.css" writebyteordermark="false">
Dreamweaverの設定は以上です。
● プロジェクトの設定
プロジェクトフォルダをどこか好きなところに作成してください。
例えば、構成を下記のようにします。
Project/
├css/
├_scss/
├js/
├images/
├config.rb
├compile.bat
└index.html
そして、そのフォルダ直下に"config.rb"というテキストファイルを作成します。
中身は、プロジェクト構成に沿って、下記のようにします。
http_path = "/"
css_dir = "css"
sass_dir = "_scss"
images_dir = "images"
javascripts_dir = "js"
output_style = :expanded
line_comments = false
続いて、フォルダ直下に"compile.bat"というテキストファイルを作成します。
内容は、下記一行です。
compass watch
SCSSファイルは、修正する度にコンパイルする必要があるので、
バッチ処理化することで、保存される度にコンパイルし直すと便利です。
そのためのファイルになります。
作成し終えたら、"compile.bat"ファイルを起動します。
作業開始前に、必ず起動するようにしましょう。
● SCSSファイルの作成
"_scss"フォルダの中に、test.scssファイルを作成してください。
SCSSでどんなことが出来るのか、試してみましょう。
test.scss
@import "compass";
/* reset */
@import "compass/reset";
/* variable */
$h1_color: #123456;
h1 {
color: $h1_color;
}
/* mixin */
p {
@include box-shadow(1px 1px 0 #ccc);
}
/* nest */
section {
background: #000;
nav {
background: #333;
}
}
/* extend */
h2 {
height: 60px;
line-height: 60px;
font-size: 16px;
}
h3 {
@extend h2;
font-size: 14px;
text-align: center;
}
出力されるtest.css
/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block;
}
/* variable */
h1 {
color: #123456;
}
/* mixin */
p {
-webkit-box-shadow: 1px 1px 0 #cccccc;
-moz-box-shadow: 1px 1px 0 #cccccc;
box-shadow: 1px 1px 0 #cccccc;
}
/* nest */
section {
background: #000;
}
section nav {
background: #333;
}
/* extend */
h2, h3 {
height: 60px;
line-height: 60px;
font-size: 16px;
}
h3 {
font-size: 14px;
text-align: center;
}
● SCSSファイルの説明
■Compassのインポート
@import "compass";
Compassの機能を使う場合、必ず付けておいてください。
■reset.cssのインポート
/* reset */
@import "compass/reset";
コンパスの機能の一つになりますが、
これだけでreset.cssのインポートをすることが出来ます。
■変数
scss
/* variable */
$h1_color: #123456;
h1 {
color: $h1_color;
}
css
/* variable */
h1 {
color: #123456;
}
変数機能です。
変数名には$を付けて、:以降が変数になります。
CSSライクな書き方ですね。
■ミックスイン
/* mixin */
p {
@include box-shadow(1px 1px 0 #ccc);
}
/* mixin */
p {
-webkit-box-shadow: 1px 1px 0 #cccccc;
-moz-box-shadow: 1px 1px 0 #cccccc;
box-shadow: 1px 1px 0 #cccccc;
}
Compassで用意されているミックスインの一つで、
box-shadowの各ベンダープリフィックスが一行で書けます。
■ネスト
/* nest */
section {
background: #000;
nav {
background: #333;
}
}
/* nest */
section {
background: #000;
}
section nav {
background: #333;
}
SCSSのネスト表現です。
入れ子に出来るため、コード量が減ります。
■継承
/* extend */
h2 {
height: 60px;
line-height: 60px;
font-size: 16px;
}
h3 {
@extend h2;
font-size: 14px;
text-align: center;
}
/* extend */
h2, h3 {
height: 60px;
line-height: 60px;
font-size: 16px;
}
h3 {
font-size: 14px;
text-align: center;
}
タグ名やクラス名で、要素の継承をすることが出来ます。
冗長になりがちなコードの整理が可能です。
以上、駆け足での説明となってしまいましたが、
SCSS+Compassの導入から使い方の概要になります。
今回のブログ作成にあたり、下記参照させていただきました。
コーダー必見、SCSS・Compassで開発効率アップ｜Sublime Text 2でコンパイル編
SassとDreamweaverのコードヒントでCSSをさらに効率的に
SCSSとCompassの使い方に関しては、下記記事に詳しいです。
CSSの常識が変わる！「Compass」、基礎から応用まで！
これを機会に、是非導入をオススメします。
