現役コーダーが届ける秘伝の書〜Sassはどう使うの？の巻〜

ヒロ@Webコーダー

2024年7月6日 15:05

どうも、ヒロです！

最近、暑い日が続きますが
いかがお過ごしですか？

僕は変わらず元気に過ごしていますが
暑い日は始まったばかり！

体調崩さないように気をつけましょうね！

ほいで、
最近、ちょくちょく聞く相談事があって

「Sassを教えてもらったんですけど
メリットが分かりません😭」

僕からすると
Sass使わなかったらいつまで経っても収益が増えませんよ！
って話なんですよ。

ちょっとキツイ言い方しましたが
それくらいSassは使って当たり前の話。

だからこそ、
そんなお困りを解決できるように
僕が今やっている手法をお伝えします。

この記事を読むことで
✅コーディングのスピードが上がります
✅作業性が上がります
✅誰もがSassを使って！という理由が分かります

逆に読まないと
✅コーディングに時間がかかりすぎる
✅納期に追われる
✅いつまでも収益を上げることができません

ぜひ、
自身のスキルとしてしっかりレベル上げしてください！

Sassってどう使うの？

Sassと言っても
SASS記法とSCSS記法とあるんですけど

僕はSCSS記法を使っているので
そっちで説明をしますね！
（記法について気になる方は自分で調べて笑）

まず、CSSで記載した場合どうなるか？
説明していきますね。

こっちは
当たり前のように使っているから
認知していただけてると思うんですけど

CSSだと一々個別に記載しないといけないじゃないですか？

h1{
  font-size: 20px;
}

h2{
  font-size: 18px;
}

h3{
  font-size: 16px;
}

h1.title{
  color: #111111;
}

h2.title{
  color: #333333;
}

h3.title{
  color: #888888;
}

これがSassを使ってコーディングすると

h1{
  font-size: 20px;
}

h2{
  font-size: 18px;
}

h3{
  font-size: 16px;
}

$h1-color: #111111;
$h2-color: #333333;
$h3-color: #888888;

h1.title{
  color: $h1-color;
}

h2.title{
  color: $h2-color;
}

h3.title{
  color: $h3-color;
}

こういった感じで
関数で指定してやることで
大規模サイトで使うときは記述が少なくすみます。

逆にいうと小規模サイトでは
あまり効力を発揮しません。

というか、
記載する内容も少ないので
記述する量があまり変わらないんですよね笑

他にも関数でできることとして
メディアクエリ対応できます！

普段ならこう記述するところを

@media screen and (max-width:768px) {
  .class{
    font-size: 20px;
  }
}

事前に変数を記述しておくことで
楽することができます。

＊変数定義
$sp: 768px;

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

.class{
  width: 50%;

  @include sp {
    width: 100%;
  }

}

こうすることで768pxが挿入されて
768px以下では　width: 100%;
769px以上では　width: 50%;
が装飾することが可能です。

あとは、
僕としては最大のメリットだと感じてるんですが

ファイル分けができるので
後から調整が必要になった時に分かりやすいんですよね

このファイル分けなんですけど、
僕の場合はFLOCSSと似ていてるんですけど
大きく分けたファイル名が違うのでご了承ください。

構成はこんな感じです。

base
global
module
page
utillity

各ファイルに振り分けているイメージはこんな感じです！

①base

base.scssとreset.scssといった
サイト全体のスタイルのベースとなる部分を配置しています。

base.scssは
サイトの基礎の基礎となる部分の設定。

reset.scssは
reset.cssの内容をそのまま記載。

②global

function.scssとsetting.scssといった
変数化できる内容を配置しています。

function.scssは
画面幅に応じて変化するようにフォントサイズの関数化や
pxをremで対応できるようにするための関数を書いています。

setting.scssは
そのサイトのフォントサイズやカラーなどの
関数化をここでしています。

③module

header.scssやfooter.scssといった
設定そのものが使いまわせるものを配置しています。

ここからは
そのサイトによって作成するファイルは変わってきますが
headerやfooter、FV(MV)などのファイルが該当します。

④page

ここは各ページ毎の設定が必要になってくる
ファイルが該当します。

会社概要ならabout.scss
採用情報ならrecruit.scss
お問い合わせならcontact.scss

といった内容のファイルが該当します。

⑤utillity

ここは調整のための便利な設定をしています。
が、僕の場合は、SP版だけ表示やPC版だけの表示のみの設定しか
配置していません。

人に寄っては
marginを強制的に付与していたりだとか
そういった後で設定するのが面倒なことを配置している人もいるみたいです。

いかがでしたでしょうか？
実際に僕が使っていて思うSassのメリット等をお伝えしました。

正直、
LPや小規模サイトでは記述する量が変わらないので
メリットが薄れますが

変数に関しては
４ページを超えてくるとメリットを感じますし

メンテナンス性においては
複数ページ発生した時点でとても優位性があります。

ぜひ、
これを機会にSassをガンガン使って
慣れていってください！

この記事が気に入ったらサポートをしてみませんか？