Dreamweaverで覚える最新Web開発ワークフロー: Sass編

連載

Dreamweaverで覚える最新Web開発ワークフロー

先日公開されたDreamweaverベータ版は、高機能で効率的なモダンなツールとして生まれ変わるべく、Bracketsがエディタに取り込まれ、UIにはダークなテーマが適用されるなどの大きな変更が行われています。より詳しい情報は、完全に生まれ変わる次世代 Dreamweaverベータ版を先行公開をご覧ください。

完全に生まれ変わる次世代 Dreamweaverベータ版を先行公開
https://blogs.adobe.com/creativestation/web-see-how-dreamweaver-is-transforming-for-the-future

完全に生まれ変わる次世代 Dreamweaverベータ版を先行公開

この連載では、新たに生まれ変わろうとしているDreamweaverベータ版を元に、最新のWeb制作に関する流れや技術を紹介します。今回は、Dreamweaverベータ版に追加された、CSSプリプロセッサーの機能について紹介します。

__
Dreamweaver ベータ版をダウンロード

Dreamweaver CC ベータ版で追加された CSSプリプロセッサー

CSSプリプロセッサーとは、SassなどのCSSメタ言語（CSSの元になるファイル）からCSSファイルにコンパイル（変換）するプログラムのことです。従来、CSSメタ言語をCSSにコンパイルするには、ターミナルやSassをコンパイルするアプリケーションに頼らならければなりませんでした。
Dreamweaverベータ版では、SassやLessのコンパイルに必要な環境が自動で構築されます。Windowsでは面倒なRubyなどの環境構築もDreamweaverをインストールするだけで整います。CSSメタ言語のコンパイルはファイル保存のタイミングで自動的に行われ、コマンドプロンプトなどを使わずに、CSSが生成されます。

本記事では、Sassを中心にDreamweaverベータ版の関連機能の使い方を取り上げます。
Sass自体の使い方については、現場で役立つ実践Sass | Adobe Creative Stationをご覧ください。

サイトのオプションを確認する

CSSプリプロセッサーに関するオプションはサイトごとに定義できます。まずは新しくサイトをつくってみましょう。
「サイト」の「新規サイト」から新しいサイトの設定を呼び出します。ダイアログが表示されたら、サイト名とローカルサイトのフォルダを定義します。

https://blog.adobe.com/media_11264ba3e31f0706bd162ec6117d110fe3d43d17.gif

サイト設定から「サイト名」とローカルサイトのフォルダを定義する

Sassのコンパイルを有効にするには、サイト設定パネルの左側のナビゲーションから「CSS プリプロセッサー」を選択し、「Enable compilation:」にチェックが入っているか確認します。チェック済みであれば、Sassファイルのコンパイルが行われる状態になっています。

出力形式の指定

SassやSCSSのファイルの出力形式を「nested」「compact」「compressed」「expanded」の4つから選択できます。それぞれの出力形式の特徴は以下の通りです。

https://blog.adobe.com/media_cbb0fcd4743d720cc76097c19ff9d88c11f03d40.gif

Sassのコンパイルを有効にし、出力形式を選択した画面

出力形式: nested

ネストをインデントで表現して出力する形式

.foo {
  color: #000;
  font-size: 100%; }
  .foo .bar {
    width: 100%; }

出力形式: compact

セレクタごとにCSSを1行で出力する形式

.foo { color: #000; font-size: 100%; }

.foo .bar { width: 100%; }

出力形式: compressed

余分な空白や宣言ブロックの最後のプロパティのセミコロンを削除し、すべて1行で出力する形式

.foo{color:#000;font-size:100%}.foo .bar{width:100%}

出力形式: expanded

宣言のみにインデントを追加し、出力する形式

.foo {
  color: #000;
  font-size: 100%;
}

.foo .bar {
  width: 100%;
}

Sassを利用するとCSSファイルは編集することはなくなるため、CSSの出力形式は可読性が必要ありません。そのためファイルサイズを軽減する「compressed」にしておくといいでしょう。

フォルダの指定

Sassをコンパイルする準備ができました。このままSCSSファイルを保存すれば、コンパイルは行われます。ただ、SCSSファイルの保存先やCSSの出力先のフォルダーを、サイトの管理の面からは設定しておきたいところです。
関連するファイルの入出力先は、サイト設定の「CSS プリプロセッサー」下の「Source & Output」から定義します。

下の画像の「ソースフォルダー」には、Sassファイルを保存するフォルダを定義します。
その上の「CSS出力」にはCSSの出力先を定義しましょう。通常は下の画像のように「出力フォルダーを定義」を選択して「ソースフォルダー」とは別の保存先にCSSを出力するといいでしょう。

https://blog.adobe.com/media_2cc82d95bf3c57a5c8f0f32cf9dcd66800cd28a5.gif

CSSの出力するフォルダーは「出力フォルダーを定義」から「./css」を指定。Sassのソースフォルダーを「./sass」を定義している

フォルダの設定が終わったら「保存」ボタンを押します。これで作業できる環境が整いました。

Sassを使ってみる

「新規ファイルの作成」から「SCSS」を選択してファイルを作成し、先ほどサイトの設定の「ソースフォルダー」で指定したフォルダ内に、名前をつけて保存します。準備できたら、SCSSファイルににスタイルシートを記述しましょう。

下記のコードをSCSSファイルにコピー&ペースとして、保存してみましょう。
サイト設定で定義したCSSの出力先に、コンパイルされたCSSが出力されます。

/* Scss Document */
h1 {
  width: percentage(160/320);
  span {
    color: #aaa;
  }
}

Dreamweaver CC 2015までのエディタでは、Sassなどのネストがうまく認識されず、カラーリングが満足のいくものではありませんでした。
しかし、新しいDreamweaverベータ版から、Bracketsのエディタが一部統合されたことにより、Sass/SCSS/Lessのシンタックスが大幅に強化されています。
入れ子をはじめとする、IncludeやMixins, Functionsなどのシンタックスが正しく認識されます。

https://blog.adobe.com/media_f0103892556fecba2649b2ede0294081bb2659dc.gif

左がSCSSファイル、右が出力したCSSファイル。ウィンドウ]->整列]->左右に並べて表示]から表示している

Sassのライブラリを利用する

Sassは便利なツールですが、mixinや関数などを0から用意していては時間がかかります。DreamweaverではSassを便利にするライブラリの中でも、有名なものを簡単に利用できるようになっています。

利用できるライブラリは、下記のとおりです。

Bourbonを利用する場合は、Sassファイルの上部に「@import ‘bourbon’;」を記述すると、すぐに利用できるようになります。

https://blog.adobe.com/media_e08dbbcb06fc023817c9659f776fadd266f0cf42.gif

Bourbonを利用した例。Sassファイルの上部にimportでライブラリを読み込み、@includeを使ってグラデーションを出力している

Compassを利用したい場合は、サイト設定の「CSS プリプロセッサー」の「Compass」の項目から「Compass を使用する」にチェックを入れ、Sassファイルの上部に「@import ‘compass’;」を記述します。
Dreamweaverに内蔵されているライブラリを利用するので、Windowsユーザーでも面倒なインストールを行わずに手軽に使うことができます。

https://blog.adobe.com/media_27513c929c268a721d5aade524b68c4a197cc1f7.gif

サイト設定から「Compassを利用する」にチェックを入れた例

また、特定のライブラリを改変して使いたい場合は、サイト設定の「CSS プリプロセッサー」から改変したいライブラリを選択し、「ファイルをインストール」ボタンを押します。ボタンを押すと、サイト内の任意の場所にライブラリを自動的に設置できます。

まとめ

Sassを中心に解説しましたが、Dreamweaverベータ版をインストールすれば、簡単な設定をするだけでCSSプリプロセッサーを使えるようになります。
まだSassを利用したことがない方も、ターミナルやコマンドプロンプトなどを使わずに、GUIだけで簡単に導入できます。
ぜひ試してみてください。

__
Dreamweaver ベータ版をダウンロード