Sass を Win + Dreamweaver 環境で使えるようにする

2013年1月10日 · by KaBuKi · in HTML5/CSS3

Win+Dreamweaver（以下DW）環境でSassを使えるようにし、初歩をかじって理解まで出来る、自分の中では最も簡単なクイックガイドです。30分後には貴方もSassを扱えるようになってます。

Scoutのインストール

http://mhs.github.com/scout-app/
上記よりダウンロードしインストールする。

Scoutの初期設定

適当なプロジェクトフォルダを作成。例として「scout_test」
※ディレクトリパスに日本語など2バイト文字が含まれるとエラーが出るため注意
プロジェクトフォルダの中に「css」「scss」のフォルダを作成
Scoutを起動し、左下の「＋」ボタンをクリック
作成したプロジェクトフォルダを指定する。
「Configure」画面の「Input Folder」に「scss」フォルダを指定
「Configure」画面の「Output Folder」に「css」フォルダを指定

上記設定により、「scss」フォルダ内のscssファイルを編集したら「css」フォルダ内にcssファイルが自動生成される設定となる。

DWの設定

拡張子「scss」を認識させる

「編集＞環境設定＞ファイルタイプ／エディタ＞コードビューで開く」に「.scss」を追加。

scssにcssのコードヒントを適用させる

下記フォルダを開く

C:\{DWインストールパス}\configuration\DocumentTypes

上記フォルダ内の「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">

「winfileextension」と「macfileextension」の値に「scss」を加える形。

DWでscssを編集する

新規サイト作成を行い、Scoutの初期設定で作ったプロジェクトフォルダを指定する。
「sass」フォルダに「style.scss」ファイルを作成し開く

「style.scss」に下記をコピペ。

@charset "utf-8";

/* variable */
$bgColor:#fff;
$textColor:#666;
$ww:800px;
$mw:400px;

/* style */
body {
    background:$bgColor;
    color:$textColor;
    max-width:$ww;
    min-width:$mw;
}

div {
    color:$textColor;
    max-width:$mw;
}

Scoutの画面左側、プロジェクト名の横にある「▶」ボタンを押す。
これでScoutが「sass」フォルダを監視するモードに入る。
数秒程度で「css」フォルダに「style.css」が生成されるので確認する。

生成された「style.css」を見れば、Sassがどういうものか理解できると思います。

ミックスイン（インクルード）記法を試す

「style.scss」を下記のように修正。

@charset "utf-8";

/* variable */
$bgColor:#fff;
$textColor:#666;
$ww:800px;
$mw:400px;

/* mixin */
@mixin layoutBlock($px) {
    display:block;
    width:$px;
}
@mixin textShadow {
    text-shadow:2px 2px 3px rgba(0,0,0,0.5);
    -webkit-text-shadow:2px 2px 3px rgba(0,0,0,0.5);
    -moz-text-shadow:2px 2px 3px rgba(0,0,0,0.5);
}

/* style */
body {
    background:$bgColor;
    color:$textColor;
    max-width:$ww;
    min-width:$mw;
}

div {
    color:$textColor;
    max-width:$mw;
}

.block1 {
    @include layoutBlock(200);
}
.block2 {
    @include layoutBlock(300);
    @include textShadow;
}

「@mixin」で指定したスタイルを「@include」で呼び出すことができます。
JavaScriptの「function」で関数作るのと同じ考え方です。

他にもさらに便利な記法がありますが、他の応用は探せばすぐ出てきます。
さぁこれで貴方もレッツエンジョイ、Sassライフ！

筆者について

KaBuKi: ゲームとジョジョを愛するファミッ子世代。好きな言葉は「機能美」。
公私ともにWebサービスを作る系男子。