今さらSassを使ってみたい【導入前日編】

とても今さら感はありますが、作業効率化の一つとしてSassを導入したいと考えています。
今回は、導入するにあたり調べたことの手触りを共有します。

Sassってそもそもなあに

Sassとは「メタ言語」といってある言語を生成するための言語です。
今回の場合はCSSを生成するための言語で、今まで通りのCSSを基本として、さらに使いやすくなります。
CSSをよりシンプルで簡単に、そして使える書き方も増える＝作業効率があがる！と思われます。

導入からまでの制作までの大まかな流れ

1. あなたのパソコンでSassを使えるように、RubyやSassをインストールします
2. CSSを書くように、拡張子が.scssのファイルにSassのコードをゴリゴリ書いてゆきます
3. .scssはブラウザが読んでくれずに効かないので、いつものCSS（.css）に変換してくれるコンパイラを使用して変換！！
4. 変換したCSSをブラウザが読んでくれる！

導入する前に感じるメリットとデメリット、そして不明点

メリット

• CSSで書いても問題なし

  .scss内は今まで通りのCSSの書き方でも大丈夫！なので気軽に導入しやすいです

• 変数、関数、入れ子や演算などが使える

  colorやmarginの値などを変数にしたり、よく使う記述を関数にして使いまわすことができるので、
  より早く読みやすいコードが書けます。

デメリット

• 記述がシンプルになる反面、変数や関数を多用して複雑化しそう

  あまりに多用すると、シンプルに記述したはずが分かりづらくなりそうです。
  たとえばJavascriptで使うような連想配列や、繰り返し処理も使用できるので
  多用するとまるでプログラムを組んでるような見た目になります。

  @each $actionOne, $size in $boxSizes {
    .btn--#{$actionOne} {
      width: $size;
      height: $size;
    }
  }
  

  ただこれらを使いこなすと時間の削減がかなりできそう。慣れですかね。

不明点

• 納品時のデータの形

  関数をまとめたSCSSを読み込んで使用する時などはCSSに変換しないファイルが出てくるのですが、納品データとして同梱してよいのか不明です。

• 外部と共同で制作する場合の導入方法

  変換したコードを引き継いだりした時のすり合わせ方などは事前に決めておかないと先祖返りや手間が増えそうです。

以上、所感でした。
次回はRubyやSassをインストールしてゆきます！