SCSSのmixin・関数集：レスポンシブ・フォントサイズ・余白管理を効率化しよう

レスポンシブ対応を効率化するmixin

メディアクエリを毎回書くのは面倒ですが、mixinを使えば一行で完結できます。以下はブレークポイントを定義し、それを使うmixinの例です。

// src/styles/base/_mediaquery.scss
$breakpoints: (
    sm: 480px,
    md: 768px,
    lg: 1024px,
    xl: 1280px,
);

@mixin mq($point) {
    @if map-has-key($breakpoints, $point) {
        @media screen and (min-width: map-get($breakpoints, $point)) {
            @content;
        }
    } @else {
        @warn "未定義のブレークポイント #{$point} が使用されています。";
    }
}

使用例

// src/styles/components/_element.scss
@use '../base/mediaquery';

.element {
    font-size: 16px;

    @include mediaquery.mq(md) {
        font-size: 18px;
    }

    @include mediaquery.mq(lg) {
        font-size: 20px;
    }
}

---

レスポンシブなフォントサイズ関数

CSS Clamp関数を使って、ビューポート幅に応じた自動スケールフォントを実現する関数です。

// src/styles/base/_font.scss
@function fluid-font($min-size, $max-size, $min-vw: 375, $max-vw: 1280) {
    $slope: ($max-size - $min-size) / ($max-vw - $min-vw);
    $y-axis-intercept: $min-size - $slope * $min-vw;
    @return clamp(#{$min-size}px, #{$slope * 100}vw + #{$y-axis-intercept}px, #{$max-size}px);
}

使用例

// src/styles/components/_title.scss
@use '../base/font';

.title {
    font-size: font.fluid-font(16, 24); // 画面サイズに応じて16px〜24pxに変化
}

---

余白の一貫性を保つスペーシング関数

余白のサイズを変数化しておくことで、統一感のあるデザインを保てます。

// src/styles/base/_spacing.scss
$space-unit: 8px;

@function space($multiplier) {
    @return $space-unit * $multiplier;
}

使用例

// src/styles/components/_section.scss
@use '../base/spacing';

.section {
    margin-bottom: spacing.space(4); // => 32px
    padding-top: spacing.space(2);   // => 16px
}

または、mixinとしても利用可能です。

// src/styles/base/_spacing.scss
@mixin spacing($property, $multiplier) {
    #{$property}: space($multiplier);
}

// src/styles/components/_card.scss
@use '../base/spacing';

.card {
    @include spacing.spacing(margin-bottom, 3); // => margin-bottom: 24px;
}

---

よく使う定番mixinまとめ

ここまでの機能を統合したSCSS構成例です。

// src/styles/style.scss
@use 'base/mediaquery';
@use 'base/font';
@use 'base/spacing';

.article-title {
    font-size: font.fluid-font(20, 32);
    margin-bottom: spacing.space(3);

    @include mediaquery.mq(lg) {
        margin-bottom: spacing.space(4);
    }
}

このようにモジュール化することで、SCSSの保守性が大幅に向上します。

---

まとめ：効率的なSCSS設計で生産性を上げよう

レスポンシブ対応、フォントサイズ調整、余白の統一は、プロジェクトごとに何度も登場する定型作業です。今回紹介したmixinや関数をあらかじめ共通モジュールとして整備しておくことで、開発スピードが大幅に向上し、チームでのコーディングも一貫性のあるものになります。

ここで紹介したmixinや関数は、あくまでも基本設計の一例です。プロジェクトの要件やデザインの方向性に応じて、柔軟に修正・拡張していくことが重要です。ぜひ、自身のプロジェクトにも最適な形で取り入れてみてください。