SASSという、CSSを書くのに便利な新しい言語があると聞き。 検索してみたら、どうやらSCCを少し分かりやすく書くことができるメタ言語※だとか。 ※メタ言語というのは、ある言語を書きやすくするための言語（そのままですね） 分かりやすく言うと、CSSとSASSの違い、SASSを使う一番大きな特長(メリット)は 「セレクタのネストの表現がシンプルにできる」 ということのようです。
例えば、このブログはこの(記事を書いている時点では)Simplicity2というテーマを使っていますが。 このテーマでは、全体のデザインにH1・H2などの見出しタグが使われており、そのスタイルがテーマによって既に定義されてしまっているのですね。 他に定義済みのタグがどれくらいあるのか完全には把握していませんが、記事の中で「タグが効かない？！」と言うときに、セレクタの優先順位でテーマの定義に負けてしまっているということがあるわけです。 それを回避するために、"記事内" を指定するセレクタとして 「 #main 」 というセレクタを必ず追記するようにしています。 ⇒スタイルが効かないのは何故か？ 「 #main 」が指定されている領域（＝つまりブログの記事本文部分）でのみ、CSSの定義をリセットするよう、子テーマのCSSに追記してあるわけです。 ここから本題、つまり、この「 #main 」を、いちいちすべてのセレクタの前に記述しなければならないわけですが、SASSだと、これをガバっとくくって指定してしまえる、ということなんですね。 例 従来であれば
#main h1 { スタイル }
#main h2 { スタイル }
#main h3 { スタイル }
#main h4 { スタイル }
#main h5 { スタイル }
#main h6 { スタイル }
のように、すべてのスタイルの前にいちいち「 #main 」をつけて書かなければならなかったのが、SASSなら
#main {
#the-content{
h1 { スタイル }
h2 { スタイル }
h3 { スタイル }
h4 { スタイル }
h5 { スタイル }
h6 { スタイル }
}
}
という書き方で済むわけですね。（SCSS記法） Simplicity2であれば、記事内のタグのスタイルリセットに、「 #main 」は一度だけ書けば済む、ということになるわけですね。 以前、リセットSCCについて書きましたが、既存のリセットCSSを全部そのまま「 #main 」の領域内を指定して記述してやる場合でも、「 #main 」の記述は一回で済むわけです。（リセットCSSを全部適用とかしたら重くなるような気がしますが）
SASSを使うには (1)Rubyをインストールします (2)SASSをインストールします (3)GUIをインストールします（※これは好みで） 使い方は (4)SASSで書く (5)コンパイルする 以上です。 意外と簡単ですね。
なので、やってみた。
(1)Rubyのインストール
RubyのインストーラーをRubyの公式サイトからダウンロードしてきて実行します。
↑ 「1」を入力してENTER ※なんか一緒に「MSYS2」という、Windowsのコマンドライン環境がインストールされ、「MinGW」というターミナル？が起動しましたが、とりあえず「×」を押して閉じる(笑)
(2)Rubyの起動
スタートボタンから「Ruby」の中の「Start Command Prompt with Ruby」を選んで起動 Windowsのコマンドプロンプトが立ち上がるので、「 gem install sass 」と入力してENTER
(3)GUI環境のインストール
「Koala」というのが標準的らしいので、それをとりあえずインストールしてみる 実行するとなんかシンプルなGUIが起動してきた。 （最小化されるとタスクトレイに入る模様）
(4)SCSSで記述する
テキストエディタでCSSを書いて、拡張子「SCSS」で保存する。
(5)コンパイル
コアラを起動し、先程保存したSCSSファイルをコアラの中にドロップする。 ⇒失敗 フォルダを作成し、その中にファイルを入れて、フォルダごとドロップするらしい。 認識されると、自動的にコンパイルされる模様 認識されたファイルをクリックすると右側ペインに出てくるオプションで「 Auto Compile 」のチェックをはずすと、自動コンパイルがオフになる。 自動コンパイルになっていると、SCSSファイルを書いてる最中、保存するたびにコンパイルが実行され、記述に間違いがあると付箋紙みたいなエラーメッセージがタスクトレイから出てくる。 自分の場合は、いちいちエラーが出るのが気になってしまったので一旦、自動コンパイルはオフにした。 全部書き終わったら保存してコンパイルボタンを押す。 エラーがなければ「SUCCESS」と出て、同じフォルダ内に拡張子「CSS」のファイルができている。 テストに上記の
#main {
#the-content{
h1 { font-weight: bold; }
h2 { font-weight: bold; }
h3 { font-weight: bold; }
h4 { font-weight: bold; }
h5 { font-weight: bold; }
h6 { font-weight: bold; }
}
}
を記述してみたところ、コンパイルされたファイルはこうなっていました。
#main h1 {
font-weight: bold; }
#main h2 {
font-weight: bold; }
#main h3 {
font-weight: bold; }
#main h4 {
font-weight: bold; }
#main h5 {
font-weight: bold; }
#main h6 {
font-weight: bold; }
/*# sourceMappingURL=test.css.map */
なるほどー！(・∀・) ・・・逆コンパイルはできないのかな？ CSSファイルをSASSファイルに・・・ （⇒ダメぽ） 一から書く時はいいけど、既に書いてしまったCSSは、結局手動で修正していくしかないのねん・・・ ※SASSに変換してくれるサービスを発見
その他
mapファイルとは？
パーツごとにバラバラに作っておいて、最後に全部を合体させる(ビルド)という作り方をするのが普通なんだそうで、そのための、各ファイルがどこにあるかを記述してあるファイルがmapファイルだそうです。
「SASS」って何の略？
sASSとはSass「Syntactically Awesome StyleSheet」の略だそうです。 Google翻訳では「構文的に素晴らしいスタイルシート」だそうです(^^;)
記法が二種類ある
上記は「SCSS記法」を使いましたが、それより古い記法で「SASS記法」というのがあるようです。
SCSS記法は、従来のCSSの書き方がそのまま踏襲されたような記法ですが、SASSはそれをさらにシンプルにして、「{」「}」記号が省略された記法のようです。（そのかわり、ネストの関係性をインデントで表現する。）
当然、従来のCSSの書き方に慣れている人が多いわけで、SCSS記法が主流となったようですね。
コメント