sassを使う Koala

sassを使う Koala

.scssを自動コンパイルする「Koala」をダウンロード

koalaimage

左上の歯車のアイコンをクリックし、左側メニューの「Sass → compass」にチェック。
また、左側メニューの「General → Language」から日本語モードに。

DreamweaverにSassを対応させる

①メニュー → 編集 → 環境設定 → ファイルタイプ/エディターを開く
②右側の項目「コードビューで開く」に拡張子”.scss”を追記

コードヒントが出るようにする

Extensions.txtを編集する

Windows7の環境では
C:/Users(ユーザー名)/AppData/Roaming/Adobe/Dreamweaver (バージョン)/ja_JP/Configuration

Macの環境では
/Applications/Adobe Dreamweaver (バージョン)/Configuration

に「Extensions.txt」というファイルがあると思います。
そのファイルをテキストエディタで開いて編集していきます。

scssExten

MMDocumentTypes.xmlを編集する

Windows7の環境では

C:/Users(ユーザー名)/AppData/Roaming/Adobe/Dreamweaver (バージョン)/ja_JP/Configuration/DocumentTypes/

Macの環境では
/Applications/Adobe Dreamweaver (バージョン)/Configuration/DocumentTypes/

MMDocment

カラーリングが変わらない場合

たぶんこれらのファイルが、ライブラリフォルダに入っていて見えていない。
ファインダーで検索 「 filename:MMDocumentTypes.xml 」「 filename:Extensions.txt 」
ファイル名の前に filename: を記入すると、FinderとSpotlightでも隠しファイルが検索出来ます。

koala

Sassを書いてみる

  1. 任意の場所に”test”という名前でフォルダを作る
  2. その中にDWなりのテキストエディタで、”test.scss”というファイルをつくる
  3. Koalaを起動する
  4. testフォルダを、フォルダごとKoalaにドラッグ&ドロップ
  5. すると、右側にアイコンと共に”test.scss”の表記が出ます。
  6. 右側に何やら項目が表示されるので、任意で設定する。
#main{
    width :600px;
    p{margin:0 0 1em;
    em{color:#f00;}
    }
  }
.box{
    padding: 0 10px;
    h1{
    font-size: 18px;
    }
  }

こんなかんじに書いたものが、DWで上書き保存すると普通のCSSに変換される