【GUI必要なし！】DreamweaverCC(2020)でSASS・SCSSを始めよう【今更】
こんにちは。デザイナーの野尻です。
今回は、今まで見てみぬふりをしてきたSASS・SCSSについて、最新のDreamweaverを活用することで、ようやく導入できそうになりましたので、そこにいきつくまでの経緯を記載してみようと思います。
Sassでなんかすごいことができそう・便利（と7年前から言われてきた）
思い返すと、SASSという単語自体は7年前くらいから知っていて、とっても便利だという噂も耳にしていました。
SASSを使うメリットを挙げてみると、下記のようなものがあります。
- セレクタやプロパティのネストで記述量が減る
- 一度定義したスタイルのセットを簡単に呼び出せる
- 複雑なコードも再利用できる
- 変数で値を使いまわすことができる
- 四則演算ができる
- 関数が使える
参考：https://webdesignday.jp/inspiration/technique/css/5819/
まさに可能性の塊。
Sassの導入障壁
こんなに便利なSASSをなぜ今まで使わなかったかというと、
「とっかかりづらい」この一言につきます。。
SASS導入のために必要な環境設定
・SASSのインストール
→黒い画面でやる。無理
・コンパイル
→日本語でたのむ
・GUIツール？
→逆にめんどくなってない？
思えば、SASSのインストールまではなんとかできたものの、GUIツールを使ってコンパイルするところで何度も躓いてきた気がします。
DreamweaverCC（2020）でsass/scssのコンパイルがかんたんにできるようになっていた
なんと、わざわざ新しいGUIツールを導入しなくても、Dreamweaver様のCSSプリプロセッサー機能を活用（というかデフォルト設定されている）することでSASSを使用することができようになっていました！
拡張子.sassや.scssで作成したファイルを保存すると、自動的にコンパイルされた.cssを吐き出してくれる！（吐き出す場所も指定できる）
詳細は↓
やってみると、本当にあっさりと、逆にちゃんと生成されているか不安になるくらいあっさりと.cssがコンパイルされていました。
私の中で、いまいち使えない子という印象だったDreamWeverの株が爆上がりした瞬間でした。
※注意 同じCCでも2014VerではCSSプリプロセッサー機能が存在しません。まずは最新のDreamweaverCC2020をインストールしましょう
SASSを活用した制作のスピードアップ＆クオリティアップ
ようやく、SASSを活用するためのスタート位置に立つことができたわけですが、まだまだこれから勉強が必要です。
SASSを活用した制作のスピードアップ＆クオリティアップのために、精進して参りたいと思います。
