夢みるゴリラ
夢みるゴリラ
  • 最終更新日：

Sassの使い方と導入するメリット - 効率的にサイトを作るためのツール

Sassの使い方と導入するメリット

今回はSassの使い方と導入するメリットについて説明します。よく使うものに絞って紹介していきます。

説明する環境は以下。

  • macOS Mojar v10.14.6
  • Visual Studio Code v1.44.2
この記事の目次

Sassの使い方と導入するメリット

Sassを使うにはターミナルを使って開発環境を整える必要がありますが、VScodeにある拡張機能を使えば簡単に使えるようになります。以下の記事にまとめたので参考にしてみてください。

「Live Sass Compiler」の設定方法 - VScodeでSassを書く

それではSassでどんなことができるのか説明していきます。

ネストで書ける

Sassの書き方の特徴として、HTML構造と同じように入れ子（ネスト）で書くことができます。例えば以下のHTML構造をSassで書いてみます。

<header class="l-header">
    <div class="l-header__inner">
        <h1 class="l-header__ttl">
           <a href="#" class="l-header__link">タイトル</a>
        </h1>  
    </div>
</header>
.l-header {
  width: 100%;
  .l-header__inner {
    padding: 0 20px;
  }
  .l-header__ttl {
    width: 300px;
    margin: 0 auto;
  }
  .l-header__link {
    color: red;
  }
}

出力されるCSSはこちら。

.l-header {
  width: 100%;
}

.l-header .l-header__inner {
  padding: 0 20px;
}

.l-header .l-header__ttl {
  width: 300px;
  margin: 0 auto;
}

.l-header .l-header__link {
  color: red;
}

Sassで書くことで直接書くコードの量も減り、ネストの中で書いたコードはそれ以外のエリアに影響を及ぼさないので表示崩れのミスも少なくなります。

逆にネスト構造を深くしすぎるとコードの管理が難しくなるので、多くても３階層までにしておきましょう。

&を使って親セレクタを参照できる

先ほどのHTML構造を&を使って書いてみます。

<header class="l-header">
    <div class="l-header__inner">
        <h1 class="l-header__ttl">
           <a href="test.html" class="l-header__link">タイトル</a>
        </h1>  
    </div>
</header>
.l-header {
  width: 100%;
  &__inner {
    padding: 0 20px;
  }
  &__ttl {
    width: 300px;
    margin: 0 auto;
  }
  &__link {
    color: red;
  }
}

以下はCSSに出力されたコードです。
&は親セレクターを参照するだけなのでl-headerの部分が補完されて出力されます。

.l-header {
  width: 100%;
}

.l-header__inner {
  padding: 0 20px;
}

.l-header__ttl {
  width: 300px;
  margin: 0 auto;
}

.l-header__link {
  color: red;
}

１つの要素の中に２つ以上のクラス名がある場合

１つの要素の中に２つ以上のクラス名がある場合は以下のように書きます。

<header class="l-header is-active">

</header>
.l-header {
  &.is-active {
    display: block;
  }
}
.l-header.is-active {
  display: block;
}

hoverや擬似要素の場合

マウスオーバー（hover）や擬似要素（before）でも対応できます。

<a href="#" class="l-header__link">タイトル</a>
.l-header__link {
  display: block;
  &:hover {
    color: green;
  }
  &:before {
    content: "";
    display: block;
  }
}
.l-header__link:hover {
  color: green;
}

.l-header__link:before {
  content: "";
  display: block;
}

変数（$）が使える

変数（$）とは一時的にデータを保管できる仕組みで、必要に応じて呼び出すことができます。$の横にある変数名は自由につけられます。（同じ名前はNG）

/*
  色の変数
------------------------------*/
$font-colot-base: #333; //ベースのフォントカラー
$font-colot-key: #FF5724; //キーとなるフォントカラー

/*
  フォントの変数
------------------------------*/
$font-family-mac: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; //macで使うフォント
$font-family-win: Arial, メイリオ, Meiryo, sans-serif; //windowsで使うフォント


.box__a{
  color: $font-colot-base; //色を呼び出す
  font-family: $font-family-mac; //フォントを呼び出す
}
.box__b{
  color: $font-colot-key; //色を呼び出す
  font-family: $font-family-win; //フォントを呼び出す
}
.box__a {
  color: #333;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}

.box__b {
  color: #ff5724;
  font-family: Arial, メイリオ, Meiryo, sans-serif;
}

変数を使うメリットとしては、修正があっても、その変数を修正するだけで全ページに反映されることです。全ページで使用するものは変数を作って１箇所で管理しておくと良いでしょう。

mixinが使える

複数のCSSをまとめて定義しておくことができます。mixin名は自由につけられます。（同じ名前はNG）

/*
@mixin ミックスイン名{  //mixinを定義する

}

.sample{
  @include ミックスイン名； //mixinを呼び出す
}
-------------------------------*/

@mixin flex{ //mixinを定義する
  display: flex;
  flex-wrap: wrap;
}

.box__a{
  @include flex; //mixinを呼び出す
}
.box__a{
  display: flex;
  flex-wrap: wrap;
}

引数をつかったmixin

引数を使えばさらに実用的なmixinを作ることもできます。以下はブレイクポイント用の引数とmixinの例です。

$breakpoint-size: (
  "sm": "(max-width: 559px)", //559px以下なら
  "md": "(max-width: 959px)", //959px以下なら
  "lg": "(min-width: 1500px)", //1500px以上なら
) !default;

@mixin bp($breakpoint: md) { //初期値にmdを設定
  @media #{map-get($breakpoint-size, $breakpoint)} {
    @content;
  }
}

.box__a {
  width: 100%;
  @include bp() { //mixinの読み込み
    width: 90%;
  }
}
.box__a {
  width: 100%;
}

@media (max-width: 959px) {
  .box__a {
    width: 90%;
  }
}

今回は使い方について詳しく説明しませんが１度mixinで定義を書いてしまえば、どこからでも呼び出すことができるので便利です。

importを使った読み込み

importを使ってファイルを読み込むことができます。たとえばheaderやfooterなどパーツごとにscssファイルを分けたい場合、ファイル名の前にアンダーバーをつけます。

project
|-index.html
|_sass/
   |- _reset.scss
   |- _base.scss
   |- _header.scss
   |- _footer.scss
   |- style.scss

分割したscssファイルは@importを使って読み込みます。読み込むときはアンダーバーや拡張子は省略できます。style.scssに一括して読むことが多く、上から順番に読み込まれていきます。

@import "reset";
@import "base";
@import "header";
@import "footer";

scssファイルを分割して管理することで、コーディングするスピードも上がりますし、ミスも減ります。ただルールを持って分割しないとワークツリーがカオスになるので注意しましょう。

個人的なフォルダ管理方法をまとめたので参考にしてみてください。

FLOCSSベースのサイト設計 - 破綻しないルールを決める

コメントアウトの書き方

行の先頭にスラッシュ２つをつけることでコメントアウトできます。

//この行をコメントアウトします。Sassで使えます。

/*
このコメントアウトはcssでもSassでも使えます。
-------------------------------------*/

さいごに

今回はSassの使い方と導入するメリットについて説明しました。便利な機能は他にもありますが、一番実務で使えるものを紹介させてもらいました。

Sassについてもっと詳しく知りたい方は以下の記事を参考にしてみてください。

参考
Sass の基本的な使い方のメモ"
Web Design Leaves
こちらの記事も読まれています