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

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

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

Scoutのインストール

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

Scoutの初期設定

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

  1. 新規サイト作成を行い、Scoutの初期設定で作ったプロジェクトフォルダを指定する。
  2. 「sass」フォルダに「style.scss」ファイルを作成し開く
  3. 「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;
    }
    
  4. Scoutの画面左側、プロジェクト名の横にある「▶」ボタンを押す。
    これでScoutが「sass」フォルダを監視するモードに入る。
  5. 数秒程度で「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サービスを作る系男子。