進化したDreamweaver CC 2017 Betaでは最初からcssプリプロセッサーが入っているので、別のソフトをインストルせずsassファイルをcssファイルへコンパイルすることができます。
簡単な設定でsassを導入する事ができます。
sassを覚えてみたいへど、設定が難しそうということで躊躇していた方はこの機会に是非トライして頂きたいです。
sassを覚えればcssコーディングがかなり楽になるのでお勧めです。
今回はwindows環境での設定手順を解説します。
まずはDreamweaver CC 2017 Beta版をダウンロードします。
ダウンロードはこちら
新規サイトの作成
まずは練習用のサイトを作成します。
上部メニュー＞サイトをクリックし、新規サイトをクリックします。
サイト設定
まずは練習用のサイトで使用するフォルダを作成します。例としてデスクトップに「website」というフォルダを作成し、その中にscssファイルを入れる「sass」フォルダとcssファイルを入れる「css」フォルダを用意します。
サイト名は「sassの練習」とし、ローカルサイトフォルダはデスクトップに作成した「website」フォルダを選択します。
CSSプリプロセッサー＞一般を選択して、ファイルの保存時に自動コンパイルを有効にするにチェック入れます。
CSSプリプロセッサー＞ソースと出力を選択して、出力フォルダーを定義を、デスクトップに作成した「website」フォルダの「css」を指定します。
このフォルダにコンパイルしたcssフォルダが入ります。
続いて、ソースフォルダーを、デスクトップに作成した「website」フォルダの「sass」を指定します。
このフォルダにscssファイルを入れます。
scssファイルの作成
デスクトップに作成した「website」フォルダの「sass」フォルダにscssファイルを作成して入れます。
適当にtest.scssという名前にします。※拡張子を.sassにするとコンパイルエラーが起こるので.scssの拡張子にします。
ソースコードは例で以下のコードを入れます。
#main{
background-color:#fff;
.content{
background-color:#eee;
color:#000;
.h1title{
font-size:16px;
}
}
}
test.scssのファイルを右クリックし、「コンパイル」を実行すると、「css」フォルダ内にコンパイルされたtest.cssのファイルが生成されます。
※ファイル内容を更新するだけでも自動でファイルが生成されます。
cssプリプロセッサー部分でcssの出力スタイルを「compressed」にすると
この用に圧縮されたcssファイルを生成できます。これによりファイルの容量が軽減され、seo的にも良いです。
このようにDreamweaver CC 2017 Beta版では、最初っからcssプリプロセッサーが内蔵されているので、簡単にsassファイルのコンパイルができます。
便利なのでぜひダウンロードして試してみてください。
Dreamweaver CC 2017 Beta版のダウンロードはこちら
