コーディングの質とスピード、メンテナンス性を高めるSASS、仕事だからこそ習得したいスキル

こんにちは、リノバス制作部の松本と申します。
小林同様、技術的な記事を定期的に発信していくことになりましたので、よろしくお願いいたします。
今回は弊社でも使用しております、sassについてです。
実務経験も浅くお見苦しい点もあるかと思いますが、最後までお付き合いいただければ幸いです。

リノバス入社当初の私は職業訓練校でhtml5+cssが何とか習得できたという程度でした。
そんな私が今や業務で普通にsassを使っているとは驚きですw
cssではできないsassの魅力について少しご紹介させていただきます。

sassとは

sassとは何か調べるとSyntactically Awesome Stylesheet 直訳で構文的にイケてるスタイルシート。などとよく目にします。 では、どういうところがイケているのか
イケてる=便利!仕事がはかどる!ということだと認識してます。
職業訓練校で学んでいるときにはポートフォリオづくりにたくさんの時間を掛け、ある程度納得のいくものを作ることができました。
しかし、仕事となると定められた時間の中で最大限のアウトプットをして、お客様に最高のサービスを提供しなければなりません。
sassを導入することで大幅な時間短縮ができるのです。

sassを使うメリット

1.記述の簡略化

セレクタの親子関係をネスト(入れ子)で表すことができるので、同じ親要素を何度も記述する必要がありません。
また同じ親要素を一つにまとめることで、記述を整理することができます。

2.プログラム的な処理

変数の定義
@if,@for,@while,@earchの使用ができ、条件分岐や繰り返し処理といったプログラム的な処理を行うことができます。

上記2つのメリットによりメンテナンス性の高さや、デザインの再現に掛かる工数短縮などにも繋がる他、チーム間での分業もしやすくなります。

3.cssファイルの圧縮

コンパイル後のアウトプットスタイルの指定に「compressed」を指定するとcssファイルの圧縮ができ、ファイルを軽量化することができます。
表示スピードが売上に直結するECサイトなどでは、読み込むスタイルシートのファイル数を減らしたり、少しでもファイルサイズを小さくすることが求められますので、この面だけでもsass導入の意味は大いにありますよね。

※sassに初めて触れる人にとっては「なんだか難しそう」と思うかもしれませんが、従来のcssの記述でも動かすことができるので、sassの技術全てを習得しなければ使うことができないということがなく、少しづつ学んだことを取り入れることができます。

コンパイル

sassの拡張子は「sass」と「scss」です。
scssファイルはそのままではブラウザが認識できません。
そのため、sassファイルをcssファイルに変換(コンパイル)する必要があります。
コンパイルにはrubyとsassが必須です。
それぞれのソフトウェアをインストールします。
(macは標準でrubyが入っているのでrubyのインストールは不要)
sassを動かすにはrubyが必要になるからです。
とはいえrubyの知識は必要ありません。

簡単な使い方

自分が実際の業務の中で使用しているところを紹介します。

    1. ネスト
      同じセレクタを何度も記述することなく、セレクタの親子関係をネスト(入れ子)で表すことができる。 ネストを使用することにより同一の親要素(セレクタ)の記述を省くことができます。

また「&」を使用することで、親要素を参照することができます。

    1. ・変数
      変更や修正があった場合に変数を一つ修正するだけで同じ変数を使っている箇所の値を一括修正が可能。

変数を宣言している「$main-color」の「#333」の値を一度変更するだけで同じ変数が割り当てられているcolorが一括で変更できます。

便利な使い方

これから自分で実践で使用したいと思っているところ

    1. @extend
      指定したセレクタのスタイルを継承できる
      対象のセレクタのスタイルを任意の場所で使いまわすことができます

同じスタイルを適用したい時に「@extend」と継承元のセレクタを記述するだけです。
コンパイル後はセレクタがグループ化されるので、記述の重複を防ぐことができます。

    1. rgba変換
      16進数色コード透明度を指定し、コンパイルするとrgb値に変換される

16進数色コードのままで、rgb値に変換されます。

まとめ・感想

初めてsassと聞いた時、プログラム言語もわからないような私にはかなりハードルの高いものという認識でした。
cssに不便さを感じていたわけでもなかったので、わざわざ難しいことをしなくてもとすら思っていました。
社内でsassを使用する必要がなければ、今でも普通にcssを使っていたかもしれません。
sassを使い始めてみると、それまで不便に感じていなかったことが不便だったことに気づきます。
更に勉強を進めると、こんなこともできるんだ!と感動の連続でした。
これからも新たな技術の習得に励み、日々のコーディングのスピードアップに繋げ、より良いサービスを提供できるよう努めたいと思います。
ありがとうございました。