DreamWeaverでSass簡単導入

導入方法

DreamWeaver CC 2017以降 がインストールされているのであれば、Sassを使ったコーディングを出来る環境は整っている状態にあります。 ので、下記の流れで若干のセットアップを行ってください。 「サイトの管理」→「サーバーの定義」

ターゲット

CSSでのコーディング経験があり、CSSコード管理が煩雑になりがちだと感じているフロントエンジニア・HTMLコーダーの方向け

Sassって何?

CSSメタ言語(CSSの元になるファイル)のひとつ、でSassのほかにLessというCSSメタ言語も有名です HTMLコーディングを生業とされてる方なら、名前くらいは聞いたことがあるはずです。

何が出来るの?

コードの管理が非常に楽になります。 HTMLの入れ子構造と同じ考え方でCSSコードを書く事が出来ます。 実際のコードを見てみましょう Sassファイル(test.scss)

Sassファイル → 書き出されたCSSファイル(test.css)

以上です。 如何でしょうか? Sassファイルでは HTMLの入れ子構造と同じ概念でCSSを定義することができています。 これに対し、書き出されたCSSファイルは 目的のコードが書き出されていることを確認できると思います。 メンテナンス性も非常に高く、大規模なプロジェクトでは効率的にコードを書き出すことができるのです。 Sassは便利なフレームワークではありますが、関数などを0から用意していてはそれなりに時間がかかります。 DreamweaverではSassを便利にするライブラリの中でも、有名なものを簡単に利用できるようになっています。 利用できるライブラリは、下記のとおりです。

Compass

#メリット ベンダープレフィックスの付与に便利なMixinや独自関数、CSSスプライトの作成が楽に行えるライブラリ。 #デメリット CSSを出力するのに時間がかかり、ベンダープレフィックスの付与やCSSスプライトは別の方法が主流になっている。

利用方法

Compassを利用したい場合は、サイト設定の「CSS プリプロセッサー」の「Compass」の項目から「Compass を使用する」にチェックを入れ、Sassファイルの上部に

を入れる

Bourbon

#メリット Bourbonはベンダープレフィックスの付与に特化した軽量なMixin集 #デメリット v5からベンダープレフィックスのMixinは削除予定になっており、公式ではautoprefixerを勧めている様に仕様変更で対応が不安

利用方法

Bourbonを利用する場合は、Sassファイルの上部に

を入れる

Neat

「Bourbon」プロジェクトの一つでレイアウトに特化したMixin集 #メリット Mixinを使ってレイアウトを構築するため、BootstrapなどのCSSフレームワークのようにCSSのクラス名に依存しない

Bitters

「Bourbon」プロジェクトの一つ。h1やul要素など、基本となる要素にスタイルを適用するライブラリ #メリット リストやテーブル、ボタンなどの要素のコンポーネント化に役立つ。 以上導入について、ざっくりと解説しましたが私のチームで利用しているのは主にCompassです。 Compassについてはまた別の機会に記事を書きたいと思いますが、ベンダープレフィックスにしても1行描くだけで 数行分のコードを書き出してくれたり、気の効いた機能が満載です。 ただ、上記にも示した通り書き出しに数秒かかってしまうので その点だけが問題ですが 共通ライブラリとして、常に使うものに関しては事前に用意しておき プロジェクトごとに複雑なコーディング部分に関しては 都度書くというルールでやると効率よくコーディングできます。 今回は以上です。