プラカンブログSTAFF BLOG

2019.09.02

【Sass・DreamWeaver】~使ってみた~

 

7月も中旬に差し掛かっているのに雨続きで、なんだかじめじめしています(執筆時)。こんにちは、はたやまです。

最近になって、やっとSassを少しずつ挑戦し始めました。
まだまだ、はいはいから立ち上がったような覚束ないわたしではありますが・・・
本や、Webを見てみるとどうやら、DreamWeaverでのコンパイルが思いのほか簡単に使用できるようでした。

今回は、自分の覚書きという意味も込めて、DreamWeaverでコンパイルをしてみよう!
で進めたいと思います!(何番煎じか分からない)

設定方法

サイトの定義

まずは、Sassの設置を行うために、サイトの定義をします。

上部メニューより「サイト」→「新規サイト」をクリック
下記画面が表示されます。
左メニュー「サイト」を選択→「サイト名」を任意で設定→「ローカルサイトフォルダー」に使用するフォルダを入力

 

CSSプリプロセッサーの設定

次に、左メニュー「CSSプリプロセッサー」→「一般」を選択
下記画像が表示されます。

一般パネルでは、次の設定をします。

●ファイルの保存時に自動コンパイルを有効にする
チェックをつけると監視機能が有効になり、Sass保存時に自動にCSSにコンパイルされる。

●SASS/SCSS: Outputfile style
プルダウンを開き、下記4つのスタイルからコンパイルの種類を選択します。
nested、compact、compressed、expanded

●ソースコメント作成
書き出したCSSに、Sassの行数とファイルパスのコメントが入る。

●ソースマップを作成
ソースマップファイルを出力

 

ソースと出力の設定

次にSassソースフォルダの設定と、コンパイル先のCSSフォルダの設定をします。

左メニュー「ソース出力」を選択
下記画面が表示されます。

●CSS出力
出力は下記3つを選択できます。
・ソースと同じフォルダ
設定したSassフォルダにCSSが出力されます。

・出力フォルダを定義
出力するフォルダを指定。 (今回はこちらを選択し、「css」フォルダを指定しています。)

・入力パスのセグメントの置き換え
「置換元」と「置換先」の文字列を置換して、フォルダを作成・コンパイルされます。

●ソースフォルダ
監視対象に指定したいフォルダを設定します。

ここまで設定が完了したら、
最後に「保存」をクリックして登録します。

 

コンパイルできているか確認

設定が完了したら、早速Sassをコンパイル出来ているか確認してみます。
Sassファイルを開いて変更→保存すると、自動的にコンパイルされます!

だいたい3ステップで設定ができ、簡単な印象です!
サイトの設定変更や、出力フォルダなどの指定の誤りなど、イージーミスに注意すれば、適宜自動にCSSファイルへ出力されますし…

そのほかにも、便利に設定できる機能がありそうなので、
覚束ない足取りから爆速で走れるように今後も勉強したいと思います!

 

参考:『Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ』

アバター

この記事は、HATAYAMA が書きました。