［簡単］CSSのメタ言語『SCSS』をDreamweaverで導入する方法を調べてみました

今回はCSSの記述方法のひとつである『SCSS』をDreamweaverで使用するための方法をまとめました！

今更ですが、『Sass』を使ってみることにしました。
のんびりしているとすぐに遅れてしまうwebの世界って本当に怖い……。

CSSのメタ言語『SCSS』とは？

そもそも『SCSS』を知っていますか？

『SCSS』とは『CSS』を拡張した言語の記述方法で、「CSSを効率的に書けるようにした言語」ということ。

ちなみに順番が逆になってしまいましたが、
『SCSS』とは『Sass』という言語の記述方法のひとつ。
『Sass』にはもうひとつ『SASS』という記述方法があります。

つまり『Sass』という言語があり、
その記述方式として『SASS』記法と、『SCSS』記法があります。

『SASS』記法

• インデントで依存関係示している
• セミコロンが不要

『SCSS』記法

• {}を使用することで依存関係を示している
• CSSの書き方がそのまま使える。

最初にできたのが、『SASS』で、これだとあまりにも『CSS』と使い勝手が違うという声が多くあったので、『SCSS』が生まれました。

ちなみに、このふたつの記述方法を持つ『Sass』というメタ言語ですが、「Syntactically Awesome StyleSheet」という意味らしい。

• Syntactically　＝　構文的に
• Awesome　＝　 イケてる
• StyleSheet　＝　スタイルシート

これだけでなんだかすごいことができそうですよね。

で、実際たくさんのことができ、大型サイトを作成するのに便利らしいのですが、
わたしはまだ使ったことがありませんでした。

なので、今回は試しに使用してみることに。
使ったうえで、「メリット」「デメリット」、そして導入するべきかを検討してみましょうということにしました。

『SCSS』をDreamweaverで使ってみよう

『SCSS』を使用するうえでの難点が「導入するのが面倒くさい」とよく言われていますよね。

確かにわたしも色々調べてみましたが、ここまでして導入するメリットがあるのかしらと考えてしまうほど。

ですが調べているうちにDreamweaverであれば簡単に導入することができるということを知りました！

それでは導入方法を。

サイト定義の設定を変更する

CSSプリプロセッサ―の［ソースと出力］を選択してください。

次にCSS出力のチェックを［出力フォルダーを定義］に変更し、ディレクトリは好みのディレクトリに変更し、保存！

『SCSS』フォルダを作成し、『.SCSS』ファイルを作成する

1. 『SCSS』フォルダを作成してください。
2. 新規ファイル作成で、拡張子は『.scss』を選択。
3. 『SCSS』の記述方法でソースを書き、保存してください。
4. ファイルパネルに『CSS』フォルダが作成され「2」で作成した『SCSS』と同一ネームの『CSS』ファイルが作成される。

出力された『CSS』を『HTML』にリンクさせる

こちらが出力された『CSS』ファイルになります。

なんだか変な気がしますが、「ソースフォーマット」を使用すればいつもと同じ「CSS」ソースになっていると思います。

問題がなければこちらのファイルを『HTML』に読み込んでください。

これで完了になります。

どうですか？
意外と簡単に読み込むことができましたよね。

わたしはこちらを用いてひとつサイトを作ってみることにしました。
それを踏まえて『メリット』、『デメリット』、『導入するべきか』を決めたいと思います。
それでは作成後、また更新しますのでもうしばらくお待ちください。