【初心者向け】Sassの始め方のコツ【CSSとの違いとメリット】

この記事ではSassの始め方のコツを要点を絞って簡潔に紹介します。Sassを始めるに当たってFLOCSSまで視野に入れた方が良いですが、それを含めても覚える必要のあることは然程多くありません。

Sassの始め方をザックリ

はじめは難しく考えずにCSSと同じノリで使い始めるのをオススメします。

Sassは最低限、下記の項目を守れば問題なく使い始めることができます。

これらのルールを守った上で、FLOCSS（CSS設計の一種）や2〜3の関数でコーディングを効率化するようなイメージで始めることをオススメします。

SassはFLOCCSと幾つかの関数までをセットで使うスタンスで始めることをオススメします。Sassの始め方をザックリとフロー図にまとめると下記のようになります。

STEP

エディターにSassファイルをCSSにコンパイルするプラグインをインストールして有効化する。

エディターがVS-Codeの場合はLive Sass Compilerがオススメです。以下、Live Sass Compilerの設定方法についての記事です。

あわせて読みたい

【Live Sass Compiler】SassファイルからコンパイルされたCSSファイルの保存先の変更方法【Sass】 Live Sass CompilerでSassファイルからCSSファイルにコンパイルする場合に、コンパイル先のフォルダーやディレクトリを変更することができます。この記事ではLive Sass ...

STEP

CSSをSassで書くようにする。

ファイルの拡張子を.scssに変えるだけでOKをです。

STEP

FLOCSSでSassファイルを分割管理する。

下記の記事に方法をまとめてあります。

あわせて読みたい

FLOCSSのSassファイル構成と書き方のコツ｜CSS設計の効率化 この記事では私が使っているFLOCSSのファイル構成と書き方を紹介します。 FLOCSSのフォルダー構成 私がFLOCSSで普段使っているフォルダー構成を以下に載せておきます。 ...

STEP

色とメディアクエリを関数化して使う。

下記の記事に方法をまとめてあります。

あわせて読みたい

【Sass｜＠use】色を関数化してコーディングを効率化する方法【FLOCCS】 色の関数化に関係するFLOCCSのSassファイル構造 この記事で紹介する内容はFLOCCSで使うのが前提の技術です。 FLOCSS(フロックス)とはCSS設計手法の一種で、CSSを使用目...

あわせて読みたい

【Sass｜@use】メディアクエリのブレークポイントを関数化して、レスポンシブコーディングを効率化する... FLOCCSにおけるSassファイルの階層構造 この記事で紹介する内容はFLOCCSで使うことが前提の技術です。 FLOCSS(フロックス)とはCSS設計手法の一種で、CSSを使用目的別に...

SassとCSSの違いとメリット

ファイルの拡張子

CSSファイルの拡張子は.cssですが、Sassは.scssです。

ファイルの拡張子だけ.scssに変えれば、他はCSSの記法をそのまま使えるので、CSSへコンパイルするプラグインをインストール・有効化すれば、Sassはとりあえず使い始めることができます。

例えば、下の記述例はSassファイルのものですが、書き方はCSSと特に違いはありません。

// 例

@charset "UTF-8";

html {
  font-size: 62.5%;
}
body {
  font-family: "Noto Sans JP", "メイリオ", "Meiryo", "ＭＳ ゴシック",
    "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif;
  font-size: 1.5rem;
  line-height: 1.8;
  color: fw.$text;
  background-color: fw.$bg-white;
  font-weight: 400;
  overscroll-behavior-y: none;
}

関数が使える

Sassの一番のメリットは関数が使えてることで、コーディングを劇的に効率化できる点です。

とは言っても、下記の２つの関数を使うだけでも満足できると思います。

• 色を関数化する
• メディアクエリのブレークポイントを関数化する

これらについては別記事に始め方をまとめましたので、ご参照下さい。

色をSassで関数化する

色の関数化は下記の記事に方法をまとめてあります。

あわせて読みたい

【Sass｜＠use】色を関数化してコーディングを効率化する方法【FLOCCS】 色の関数化に関係するFLOCCSのSassファイル構造 この記事で紹介する内容はFLOCCSで使うのが前提の技術です。 FLOCSS(フロックス)とはCSS設計手法の一種で、CSSを使用目...

メディアクエリのブレークポイントをSassで関数化する

メディアクエリの関数化は下記の記事に方法をまとめてあります。

あわせて読みたい

【Sass｜@use】メディアクエリのブレークポイントを関数化して、レスポンシブコーディングを効率化する... FLOCCSにおけるSassファイルの階層構造 この記事で紹介する内容はFLOCCSで使うことが前提の技術です。 FLOCSS(フロックス)とはCSS設計手法の一種で、CSSを使用目的別に...

FLOCSSが使える

FLOCCS（フロックス）というのはCSS設計の一種で、Sassファイルを共通するパーツごとに分割して管理することです。CSSをパーツ化できるので、共通のスタイルの使いまわしや管理が格段に便利になるメリットがあります。

これについても別記事に方法をまとめてあります。

あわせて読みたい

FLOCSSのSassファイル構成と書き方のコツ｜CSS設計の効率化 この記事では私が使っているFLOCSSのファイル構成と書き方を紹介します。 FLOCSSのフォルダー構成 私がFLOCSSで普段使っているフォルダー構成を以下に載せておきます。 ...

Sassで使わない方が望ましい機能

Sassの便利機能のうち下記２つは使わない方が望ましいです。少なくとも私は試行錯誤の末に使わなくなりました。

ネスト構造の多用は非推奨

ネスト構造というのはCSSセレクターを入れ子状態で書く方法です。一見便利に見えますが多用は禁物です。私は基本的に使わないようにしています。

//ネスト構造の例

.top-page-slide_wrapper {
  max-width: 963px;
  margin: 0 auto;
  .slide-img {
    object-fit: contain;
    width: 100%;
    height: 100%;
  }
}

ネスト構造の多用が非推奨の理由は、CSSセレクターの詳細度が無駄に上がってしまうからです。

例えば、上の例では、セレクターの「.slide-img」は「.top-page-slide_wrapper」に対して入れ子構造になっていますが、これによりセレクターの詳細度が一段上がって通常の記法では「.top-page-slide_wrapper .slide-img」と書かねばセレクターとして機能しなくなります。入れ子にしなければ、「.slide-img」単独でセレクターになりますので、「自分にとってどちらが管理しやすいのか？」をよく考えてからネストを使うか判断をすべきです。

私も最初はネスト構造を便利だと勘違いして多用していましたが、CSSセレクターの詳細度に悩まされまくって今では使っても一階層までとしています。主にメディアクエリでしか使っていません。

//例
.sp-br{
  display: none;
  @include fw.mq("sp") {
    display: block;
  }
}

&によるセレクターの省略

セレクターに「&」非推奨の理由は、単純に&を使うとCSSセレクターが検索でヒットしなくなるからです。この理由でクライアントから「&は使わないでね」との要望を受けたこともありますので、私は最初から使わないようにしています。