Sass、別に言うほどいらない説

こんにちは。

プログラミングスクールとか、いろんな教材見ているとやたらにSassをやらせているように見受けられます。

しかし、実際の現場でSassが効力を発揮している場面って実はあまり多くないのでは？と感じています。

少なくとも初心者がSassをたくさん時間をかけて学ぶ意味はあまりないと思っていて、その時間があったらHTML/CSSちゃんと書けるようになるとかJavaScriptの勉強に充てるとかした方が良いかなと。

そんなわけで、Web制作/Web開発の場面でSassが有効なのか僕の目線で考えをまとめてみます。

エンジニアの方は、「私の環境ではこうだ」「こんな場面でこんな使い方をすると良い」などご知見があったらぜひコメントいただけると嬉しいです。

2023/08/14 追記

Sassがいらないので当然ではありますが、それをコンパイルするのに使われるgulpもいらないという記事を書きました。

gulpはもういらない

こんにちは。プログラミングスクールとか、いろんな教材見ているとやたらにgulpをやらせているように見受けられます。しかし、実際の現場でgulpが効力を発揮している場面ってもうあまり多くないのでは？と感じています。少なくとも初心者がgulpを...

itokoba.com

2023.08.14

Web制作

web制作の領域では、主にLPやコーポレートサイトを開発することになります。

LPや小規模のコーポレートサイトでは恩恵が少ない

LPや小規模のコーポレートサイトにおいては、Sassを使うメリット以上にデメリットの方が大きいと思っています。

そもそもSassの利点としてよく挙げられるのは、

• セレクタのネスト（入れ子）ができる
• 変数が使える
• mixinが使える
• ファイル分割ができる
• 中括弧がいらない

などでしょうか。

上の機能があることによって色やフォントの管理が一元化されたり、頻出のプロパティ群をまとめて使い回しやすくしたりすることが実際の開発上における利点です。

一方でデメリットとしては

• 設計/管理工数がかかる
• 開発環境を用意するのがやや面倒

などが挙がると思います。（一回設定を構築してしまえば使いまわせば良いのかもですが。）

LPなどにおいては、単純にメリットの部分の恩恵があまりないと思います。

mixinでまとめるほどパーツの使い回しも発生しないですし、あるLPで作ったmixinが他のLPで転用できるということもほぼ無いです。ファイル分割や変数を使って色・フォントの管理をする必要性もそこまでないです。なんなら変数はCSSで使えます（https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_custom_properties）。

ネストに関しても、これはCSSの書き方の流儀にもよりますがそもそもネストが発生するようなセレクタの書き方（ul liとか）自体があまり好ましくないと思っているのでこれも利点として数えるには怪しいです。

中括弧を書かなくていいという書きぶりの話ですが、これは個人的にも良い点だなと思っています。ただこれはSASS記法の時の話で一般的に使われているSCSS記法では使えません（CSSと同じ見た目だから移行しやすいという理由でSCSS記法が後から追加されたわけですが、じゃあもう普通にCSS書けよ・・・と思ってるタイプです）。

というわけで、大した恩恵を受けられないのにデメリットだけがのしかかっているように思えます。

大規模のコーポレートサイトでは便利

一方で大規模なコーポレートサイトとなってくると、デザインの段階である程度似たページや似たパーツを設計されるケースが多く、その場合にはmixinによるコンポーネント管理や変数による色・フォントの管理が効果を発揮してきます。

何十ページものサイトで各ページが似たようなパーツで構成されている時に、全部をCSSでベタ書きするよりはかなり効率が良いでしょう。

Web開発｜ReactやVueを使えば良い

アプリケーション開発においては、ReactやVueなどのライブラリが用いられており標準でコンポーネントを設計/構築/管理する体制が整っている前提で開発されるケースが最近は多いのではないでしょうか。

じゃあパーツをまとめる役割はReact/VueがやるんだからSassがそれやらなくていいじゃんという話になって終わりです。

React/Vueのコンポーネントとは別にSassでプロパティ群の管理をすること自体が間違っているとは思いませんが、Sassの機能をたくさん使って管理する理由はかなり低くなると思います。

これ実は前述の大規模なコーポレートサイトにも当てはまるケースがあり、アプリケーションのような複雑な処理がないサイトだとしてもハンバーガーメニューやアコーディオンメニューなどのパーツはふんだんに使われていたりします。

じゃあそのパーツをコンポーネントにして管理したいよね、ということでReact/Vueを採用されることが割とあると思っています（僕の観測範囲では）。

というわけで、Web開発の領域でもそこまでSassが活躍する場面は多くないのかな〜と思います。

でもメディアクエリに関してだけは優秀

ここまでさんざんSassは微妙だと言ってきたわけですが、それでもメディアクエリに関してだけはどの規模のプロジェクトでも優秀で、それだけのために導入するのもありだと思うくらいです。

要するに、

.Box {
  width: 50%;
}

@media screen and (max-width:768px){
  .Box {
    width: 100%;
  }
}

上のように書いているものが、

$sp: 768px;

@mixin sp {
  @media screen and (max-width: ($sp)) {
    @content;
  }
}

このコードを一回定義しておくことで、

.Box {
  width: 50%;

  @include sp {
    width: 100%;
  }
}

こう書けます。

メディアクエリをページごとに何個も書く場合はかなり快適になります。同じセレクタを2回書くことも無いです。

これだけは本当に使ってみて優秀だなと思いました。逆に言えば、これだけ覚えておけば他の機能はあまり要らないとすら思っています。

まとめ

というわけで、Sassの僕目線での有用性についてでした。

ここまで書いてみて思ったのは、初心者がSassを触るとしたらメディアクエリだけ覚えてあとはスルーでも良いかな〜ということですね。それ以外の機能は必要になってから覚えれば十分だと思います。

CSSで行える細かいテクニックを学んで、もっとレベルアップしたい方はこちらの本をぜひご覧ください。

【脱・初心者】教材だけでは分からない、案件でよく要求される細かいコーディングのテクニック30選 + α - セカヤサBooks

フリーランスのフロントエンドエンジニアとして7年間、サイト制作やWebアプリケーション開発の案件に携わってきた中で「これは伝えたい」と思ったコーディングのテクニックをまとめました！正直言うと、これができているかどうかが「プロかプロでないか」...

zenn.dev

関連記事

jQuery、今までありがとう【移行すべき理由と代替案3選】

こんにちは。これまでお世話になったjQueryですが、そろそろ本当に別れを告げる時が来ているかと思います。（巷ではjQueryはオワコン、jQueryは終わった、脱jQueryとも言われていますね）なぜ必要無くなったのかにはいくつか理由があ...

itokoba.com

2022.10.01

Bootstrapはガチでいらない

はい。今回はCSSフレームワークのBootstrapは本当に必要なのかについて書いていきます。Bootstrapとは、Twitter社が開発したWebのフロントエンドを高速で制作するためのフレームワークです。公式：プログラミングスクールやい...

itokoba.com

2022.06.13