☰
ぐっちーブログ

[Sass]CSSを効率的に記述することができるSassの簡単な使用方法

プログラミング Sass

はじめに

CSSを効率的に記述することができるSassの簡単な使用方法を備忘録のためにまとめておりますが、参考になれば幸いです。

この記事では、Sassの使い方の基礎の基礎のみを紹介しております。

開発環境

  • HTML 5
  • Sass
  • VSCode

コード

<header>
    <div class="header__left">
        <h1>株式会社...</h1>
    </div>
    <div class="header__right">
        <ul class="header__right__nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</header>
// ベースカラー
$color-text-main: #3FA1C5;
$color-text-white: #FFFFFF;

// メディアクエリ
@mixin mq($breakpoint: md) {
    @media #{map-get($breakpoints, $breakpoint)} {
        @content;
    }
}

// ファンクション（メソッド）
@function activeViewSize($base-size) {
    @return $base-size / 2;
}
header {
    background-color: $color-text-main;
    display: flex;
    justify-content: space-between;
    
    @include mq(md) {
        display: none;
    }

    &__left {
        width: 200px;
    }
    
    &__right {
        display: flex;
      
        li {
            margin-right: 40px;

            a {
                color: $color-text-white;
            }

        }

    }

}
$breakpoints: (
    'sm': 'screen and (max-width: 399px)',
    'md': 'screen and (max-width: 767px)',
    'lg': 'screen and (max-width: 999px)',
) !default;
@import "config";
@import "sample";
@import "header";

コードの説明

index.html

  • ヘッダーを想定して作成。
  • 社名とナビのリストを設置。

_sample.scss

  • 2〜3行目
  • 何度も使いたい値などを変数として定義しておくと使い回しが可能で便利になる。
  • 変数は $変数名: 値； という形で定義する。
  • 変数を使いたい時は、使いたい場所で $変数名 という形で記述することで使用できる。
  • 6〜10行目
  • mixinは変数よりも複雑な内容を定義したり、引数(反映させたい値など)を与えることで臨機応変なCSSを記述することができる。
  • 今回の例は複雑なものですが、レスポンシブなデザインには欠かせないメディアクエリ(画面の横幅に応じて見た目を切り替えるようなもの)を定義。
  • 引数に画面サイズ(スマホサイズのsm, タブレットサイズのmd, パソコンサイズのlg)を渡すことで、それぞれの画面のサイズ応じたCSSを記述することが可能。
  • 13〜15行目
  • 計算を自動で行ってくれる処理を定義(メソッド)。
  • 元の数字を引数として渡すことで、その数字を2で割った数字を自動計算して元の場所に返す処理をしてくれる。
  • 注意事項
  • 本来カラーやメディアクエリ、ファンクションなどはそれぞれに応じたscssファイルに定義するのが好ましいです。例えばカラーは _color.scss 、メディアクエリは _mq.scss といった形です。
  • 今回は基本的な使い方の記述のため、わかりやすいように同じファイル内に記述しています。

_header.scss

  • 2行目
  • background-colorの値として、変数として定義しておいた $color-text-main: #3FA1C5; を使用。
  • 値を $color-text-main とすることで、#3FA1C5が背景色として適用されます。
  • 6〜8行目
  • @include mq(md) とすることで、sample.scssで定義したメディアクエリの設定を呼び込めます。
  • スマホサイズであるmdを引数で渡したため、画面の横幅がスマホサイズ以下になった場合は、display: none; cssが適用されます。
  • 10行目
  • &__leftは、HTMLの header__left クラスを表しています。
  • &と記述することで、直前までのクラス名を省略(今回の場合はheaderの部分)して記述することができるようになります。

_config.scss

  • 1〜5行目
  • sample.scssで定義したメディアクエリを使うために必要な記述です。
  • 画面横幅に応じた値と、それぞれに対応したデバイスの名前で管理するようにしています。
  • 配列のような形式(配列は0, 1, 2…といった数字で管理していますが、こちらはsm, md, lgという文字で管理しています)でまとめて管理しています。
  • メディアクエリを使うためには必要な記述くらいに思ってください。

style.scss

  • 上記で定義してきたscssファイルは、こちらのstyle.scssファイルで呼び込むことで始めて使うことができます(こちらに記述しないと使うことができないため、記述を忘れると見た目に反映されません)。
  • @importのあとにファイル名を記述します(アンダーバー(_)とファイル名(scss)は省略して記述)
  • 記述する順番が最も重要です。例えばheader.scssでcolorの変数を使っていますが、colorの変数はsample.scssで定義しています。プログラミングは上から順番に実行されますので、sample.scssよりも上(先)にheader.scssを記述するとエラーが発生してします。どのファイルが先に呼び込まれるかを意識することが大切です。

さいごに

今回はScssの基本的な使い方をご紹介しました。色々と書いてしまい1分で読める内容ではないかなと反省しております。ただ今回ご紹介した使い方はほんの一部ですので、気になる方は他にも調べてみてください。

>  >  [Sass]CSSを効率的に記述することができるSassの簡単な使用方法