B'scre8

【GUI必要なし！】DreamweaverCC(2020)でSASS・SCSSを始めよう【今更】

2020.06.10

500

こんにちは。デザイナーの野尻です。
今回は、~~今まで見てみぬふりをしてきた~~SASS・SCSSについて、最新のDreamweaverを活用することで、ようやく導入できそうになりましたので、そこにいきつくまでの経緯を記載してみようと思います。

目次 [非表示]

1. Sassでなんかすごいことができそう・便利（と7年前から言われてきた）
2. Sassの導入障壁
- 2.1. SASS導入のために必要な環境設定
3. DreamweaverCC（2020）でsass/scssのコンパイルがかんたんにできるようになっていた
4. SASSを活用した制作のスピードアップ＆クオリティアップ

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を吐き出してくれる！（吐き出す場所も指定できる）

詳細は↓

https://www.feelbee.jp/news/dreamweaver%E3%81%A7sass%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F

やってみると、本当にあっさりと、逆にちゃんと生成されているか不安になるくらいあっさりと.cssがコンパイルされていました。
私の中で、いまいち使えない子という印象だったDreamWeverの株が爆上がりした瞬間でした。

※注意　同じCCでも2014VerではCSSプリプロセッサー機能が存在しません。まずは最新のDreamweaverCC2020をインストールしましょう