CSSをラクにわかりやすく書けるSassでSCSS記法を試してみる

はじめに
Sassとは何者か？
特徴
まとめ

はじめに

Sass、はじめました。

普段はiOS端末用のアプリをメインで作っていますが、バックエンドに手を出してみたり、他の言語に手を出してみたりしています。そのついでに、フロントエンドもお遊びでやってみたりもしています。
そのなかでCSSを書くのですが、今までゴリゴリと書いておりましたよ。もう疲れました:p

なんとかお手軽に書くことができないかということで探してみましたら、Sassを見つけました。Syntactically Awesome StyleSheets。Awesomeとはなんとも魅力的ですね。
少し触ってみたので備忘録を残しておこうと思います。

Sassとは何者か？

Syntactically Awesome StyleSheets
ざっくりした紹介ですが、構造的にAwesome!な書き方でCSSファイルを作ることができるものです。

SwiftやC#などと比較して、CSSの見た目はのっぺりしたイメージです。うっかりすると似たようなことを重複して書いてしまいますし、スペルミスをしてしまった場合は見つけるのが大変。CSSはなんとも抑揚が無く掴みどころが無いツラをしているので、余計に大変。
エディタにこだわれば、ある程度は解決するかもしれません。そして書き方を工夫すれば解決するかもしれません。

散々CSSをディスった後でSass先生のお出番です。
Sassは見た目がC#っぽいSCSS記法で記述します。CSSをプログラム言語的に書くことができます。コンパイルすることで、良き感じに整えてCSSファイルを作ってくれます。確かにコンパイルをするための環境準備をする手間と都度コンパイルをする手間はかかります。それでも、少し触ってみると、もはやゴリゴリ書く世界には戻れません。

ちなみに、見た目がVBっぽいSASS記法もあります。日頃使っている言語などに応じて選んでみると良いと思います。若干見た目が違うだけで書く内容は大きく変わらないので、この辺りは完全に好みです。

特徴

ネストができる

構造的に書かれたHTMLタグに対してCSSを書こうとすると、各階層毎にセレクタを列挙しないといけません。

例えばこのような感じ。

ol { 〜 }
ol li { 〜 }
ol li a { 〜 }

少なくとも私は書き間違えると思う。できればHTMLタグの構造と同じようにかければいいよねっ！ということで、SCSS記法で書くとこうなります。

ol {
    〜
  li {
      〜
    a {
        〜
    }
  }
}

インデントや括弧が入るだけで見た目がスッキリ！

変数を使える

$マークで書き始めます。見た目はWindowsのバッチプログラムで書くような感じです。色指定など、同じことを何度も何度も書くときに有用ですね。ずらずらと書かれたコードの中に存在する何十箇所もの修正箇所を1か所ずつ書き直していく作業は苦行以外の何物でもないですし🍣。

$color_value: #acacac;

宣言はこのような感じです。この変数を使うのは単純に、

color: $color_value;

でOKです。

テンプレート化できる

関数・メソッドのようなイメージですね。mixinを使います。

@mixin [名前](仮引数) {
  [プロパティ群]
}

久しぶりに仮引数って単語を使った気がする。使い方合っているはず多分。

呼び出すときは、このようにします。

@include [名前](引数);

コンパイルで塩梅良く展開してくれます。同じことを繰り返し書くのはケアレスミスの原因となるので極力避けたいところ。変数の時と同様、こういったケアレスミスの原因を少なくすることができます。

まとめ

使い始めたところですが、上記の特徴3つだけでも十分魅力的です。使いこなしてみたいと思わせる魅力があります。浅い部分をスーッとかすっただけなので、まだまだ魅力を引き出せてはいないですが、これから精進です。

ループやスタイルの使い回し、切り出しなどもできるそうです。今までゴリゴリ方式で書いたものがSCSS記法で書いたらどうなるのか、とても気になります。使い込んで便利な情報などを紹介できればと思います。