【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を吐き出してくれる!(吐き出す場所も指定できる)

詳細は↓

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をインストールしましょう

SASSを活用した制作のスピードアップ&クオリティアップ

ようやく、SASSを活用するためのスタート位置に立つことができたわけですが、まだまだこれから勉強が必要です。
SASSを活用した制作のスピードアップ&クオリティアップのために、精進して参りたいと思います。

野尻

この記事を書いた人: 野尻

ビーズクリエイト Webに関する色々を担当しています。

あわせて読みたい