実践的なSassテクニックを学習！　書籍「Sassの教科書」で現場で使えるSassテクニックを学習しました

ハック

こんにちは！運営者のハックです。

今回は以前紹介した書籍「Sassの教科書」の内容について、現場で使えるテクニックを学習しましたので、その内容について一部紹介します。

書籍「Sassの教科書」で実践的なテクニックを学習しました
まとめ　Sassでできるテクニックの引き出しを増やしておく

書籍「Sassの教科書」で実践的なテクニックを学習しました

以前にも書籍「Sassの教科書」で学習した便利機能を紹介しましたが、今回は現場で使える実践的なテクニックについて学習しましたので、その内容を紹介します。

リンク

管理/運用・設計で使えるテクニック

サイト全体に関わる設計や、新規で作成する際に便利な方法、運用フェーズに入った際に使えるテクニックを紹介します。

CSSファイルとは違うパーシャルによるSassファイルの分割

SassはCSSを拡張した言語で、コードの再利用性や管理のしやすさを高めるための多くの機能を提供します。その一つが「パーシャル」と呼ばれるファイル分割の機能です。パーシャルを使うことで、スタイルシートを小さな再利用可能なパーツに分割して管理することができます。

sass/
├── _variables.scss
├── _mixins.scss
├── base/
│   ├── _reset.scss
│   └── _typography.scss
├── components/
│   ├── _buttons.scss
│   └── _cards.scss
├── layout/
│   ├── _header.scss
│   ├── _footer.scss
│   └── _sidebar.scss
└── pages/
    ├── _home.scss
    └── _about.scss

このようにパーシャルファイルの名前は、先頭にアンダースコア（_）を付けて命名します。このアンダースコアは、Sassがこのファイルを独立したCSSファイルとしてコンパイルしないことを意味します。

Sassファイルはサーバーにアップしないことを前提としているため、HTML関係のファイルが入っているディレクトリとは別にsassディレクトリを作って管理します。Sassのインポート機能を活用することで、最終的なCSSファイルは１つに管理することができ、コードの管理がしやすくなります。

サイトの基本設定を変数にして一元管理する

Sassの変数機能を使用すると、サイトの基本設定（色、フォントサイズ、スペーシングなど）を一元管理できます。この機能によりメンテナンスが容易になり、スタイルの一貫性を保つことができます。
例えば、「_variables.scss」ファイルを別途作成し、サイトの基本設定を変数として定義します。

// _variables.scss
//===========================================================================
//サイトの基本設定
//===========================================================================
@charset "UTF-8";

// 色の設定
$primary-color: #3498db;
$secondary-color: #2ecc71;
$text-color: #333333;

// フォントサイズの設定
$font-size-base: 16px;
$font-size-large: 24px;
$font-size-small: 12px;

// スペーシングの設定
$spacing-base: 10px;
$spacing-large: 20px;
$spacing-small: 5px;

後は、この変数だけまとめた設定専用のSassファイルを、インポート用のSassファイルの最初の方でインポートしておけばOKです。
Sassの変数機能を使ってサイトの基本設定を一元管理することで、保守性の向上、一貫性の維持、再利用性の向上、テーマ変更の容易さといった多くのメリットが得られます。

ねこ奈

デイトラ初級編で作成したポートフォリオサイトも、サイトの色とかレスポンス対応用のファイルを別途作成して、一元管理していたのにゃ！

複数人で制作する場合は、各自のSassファイルを用意する

大規模な案件など、サイトの要件やプロジェクトによってはコーディングをする人が複数人になることもあります。そのような場合、同じファイルを編集してしまい、上書きや先祖返り、コンフリクトなどの問題が発生することがあります。
そういった問題を解決するため、以下のような形でSassファイルを分割する方法があります。

sass/
├── _style.scss（各Sassファイルをインポート）
├── _hac.scss（ハックが編集するSassファイル）
├── _mona.scss（モナが編集するSassファイル）
├── _nekona.scss（ねこ奈が編集するSassファイル）

このように制作者ごとにファイルを分け、style.scssから各ファイルをインポートします。

//制作者用のSassファイルをインポート
@inport "_hac.scss";
@inport "_mona.scss";
@inport "_nekona.scss";

複数人で制作する際にSassファイルを分割することで、作業の分担が容易になり、コンフリクトの軽減、コードの可読性向上、保守性の向上、一貫性の維持など、多くのメリットが得られます。

コメントを活用してソースをわかりやすくする

Sass独自の//による１行コメントを使用して、簡単なスタイルガイドをパーシャルファイルをインポートするSassファイルに記載する方法があります。

// ====================================================================================
// style.guide
//
//#命名規則
//BEMをベースに以下のルールで記載。
//block__element,-modifier
//Blockが複数単語になる場合は、「blockName」のようにキャメルケースにする。
//大枠のレイアウトに属する場合のみ、 id を許容する。 #headerなど。
// ====================================================================================

// リセットスタイルの設定
// グローバルな要素のマージンとパディングをリセットし、ボックスの境界を標準化します。
@import 'reset';

// 変数の設定
// カラー、フォントサイズなどのグローバル変数を定義します。
@import 'variables';

このようにパーシャルファイルをインポートするメインのSassファイルにスタイルガイドを記載することで、コードの可読性とメンテナンス性が向上します。この方法を採用することで、チーム開発においても一貫性を保ちやすくなり、プロジェクト全体の効率が向上します。

レイアウト・パーツで使えるテクニック

ナビゲーションやサイドバーなどのレイアウトで使えるテクニックや、リストなどパーツ関係で使っていける内容を紹介していきます。

clearfixをミックスインで活用する

clearfixは、CSSで浮動要素（float）を使用した際に、その親要素が子要素の高さを認識できなくなる問題を解決するための技法です。これをSassのミックスインとして活用することで、効率的にスタイルを管理できます。

// _mixins.scss
@mixin clearfix {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

このようにclearfix用のミックスインを用意しておきます。

// styles.scss
@import 'mixins'; // ミックスインファイルをインポート

.item {
  @include clearfix; // clearfixミックスインを適用
  background: #eee;
  .image {
      float: left;
      width: 100%;
  }
  .text {
    float: left;
  }
}

都度書くと非常に面倒な　clearfixが@mixin clearfix;と書くだけでよくなり大幅に記述量を減らせるようになりました。また、clearfixには対応ブラウザに応じたバリエーションも多いのでソースを変更した場合も、１か所変更するだけで済むようになります。

モナ

ちなみに、エクステンドでも同様なことが可能ですが様々問題が生じるので、clearfixはミックスインを使用した方が安全であるとのことです。

文字リンクカラーのミックスインを作る

文字のリンクカラーをミックスインで簡単に作成します。
まず、文字リンクカラーのミックスインを定義します。このミックスインでは、リンクの通常状態、ホバー状態、フォーカス状態などに対するスタイルを設定します。

// ミックスインの定義
@mixin link-colors($color, $hover-color, $focus-color) {
  color: $color;
  text-decoration: none;

  &:hover {
    color: $hover-color;
    text-decoration: underline;
  }

  &:focus {
    color: $focus-color;
    outline: none;
    text-decoration: underline;
  }
}

$color：リンクの通常状態の色
$hover-color：リンクのホバー状態の色
$focus-color：リンクのフォーカス状態の色

次に、このミックスインを利用してリンクにスタイルを適用します。

// ミックスインの利用
a {
  @include link-colors(#0000ff, #ff0000, #00ff00);
}

このコードでは、通常のリンクの色を青（#0000ff）、ホバー時の色を赤（#ff0000）、フォーカス時の色を緑（#00ff00）に設定しています。
このようにして、Sassで文字リンクカラーのミックスインを作成し、効率的にリンクのスタイルを管理することができます。

Map方と@eachを使ってSNSアイコンを管理する

データタイプのMap型を組み合わせると、ボタンなどのパーツ類や色の管理がしやすくなります。
まず、SNSアイコンに関する情報をSassのMapで定義します。ここでは、アイコンのURLや表示するSNS名を含めます。

$sns-icons: (
  "facebook": (
    "url": "https://www.facebook.com",
    "icon": "path/to/facebook-icon.svg"
  ),
  "twitter": (
    "url": "https://www.twitter.com",
    "icon": "path/to/twitter-icon.svg"
  ),
  "instagram": (
    "url": "https://www.instagram.com",
    "icon": "path/to/instagram-icon.svg"
  )
);

$sns-iconsというMapにSNSの名前、URL、アイコン画像のパスを含むネストされたMapを定義します。

次に、@eachディレクティブを使って、Mapの各要素に対してスタイルを適用します。

// SNSアイコンのスタイル
.sns-icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 10px;

  @each $name, $properties in $sns-icons {
    &--#{$name} {
      background-image: url(#{map-get($properties, "icon")});
    }
  }
}

@each $name, $properties in $sns-iconsでMapの各要素をループします。
&–#{$name}は、クラス名にSNSの名前を追加します。例えば、.sns-icon–facebookとなります。
background-image: url(#{map-get($properties, “icon”)});で、対応するアイコン画像のURLを設定します。

Mapと@eachを使用することで、SNSアイコンのスタイルを簡潔に管理できます。新しいSNSアイコンを追加する場合も、Mapに情報を追加するだけで簡単に対応できます。結果として、コードの重複を避け、保守性を高めることができます。

スマホ・マルチデバイス、ブラウザ対応で使えるテクニック

スマートフォンや、タブレット端末などマルチデバイス対応で使えるテクニックや、ブラウザ対応に関するテクニックを紹介していきます。

スマホサイトでよく見る、リストの矢印をミックスインで管理する

スマートフォン向けサイトやタブレット向けのサイトの場合、右側に「＞」などの矢印を付けたデザインが良く使われます。そこで、この矢印をミックスインとしてあらかじめ定義しておき、いつでも呼び出せるようにします。

まず、矢印のスタイルを定義するミックスインを作成します。ここでは、リストアイテムの後ろに右向きの矢印を表示するスタイルを例にします。

// 矢印のミックスイン定義
@mixin arrow-right($color: #000, $size: 8px) {
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border: solid $color;
    border-width: 0 $size $size 0;
    display: inline-block;
    padding: $size;
    transform: rotate(-45deg);
  }
}

@mixin arrow-right($color: #000, $size: 8px)：矢印の色とサイズを引数として受け取ります。デフォルトは黒色と8pxです。
&::after：リストアイテムの後に擬似要素::afterを使って矢印を表示します。
borderとtransformを使って、矢印を作成しています。

次に、リスト要素に対して定義したミックスインを適用します。

// リストのスタイル定義
.list {
  list-style: none;
  padding: 0;
  margin: 0;
  
  &__item {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    @include arrow-right($color: #888, $size: 6px); // 矢印ミックスインの適用
  }
}

.list__itemに対して@include arrow-right($color: #888, $size: 6px)を使ってミックスインを適用します。これにより、各リストアイテムの右側に矢印が表示されます。

ミックスインを使うことで、矢印のスタイルを一元管理し、スタイルの変更や再利用が容易になります。必要な部分にミックスインを適用するだけで、統一されたスタイルを簡単に適用できます。また、引数を使って、矢印の色やサイズを柔軟に変更できます。
この方法で、スマホサイトでよく見かけるリストの矢印を効率的に管理できます。

埋め込み動画のアスペクト比計算にpercentage()を使って楽をする

Sassのpercentage()関数を使って埋め込み動画のアスペクト比を簡単に計算する方法を解説します。この方法を使うことで、アスペクト比を指定して動画コンテナの高さを自動的に計算し、スタイリングを簡素化することができます。

まず、動画の幅と高さからアスペクト比を計算します。例えば、16:9のアスペクト比の場合、幅は16、高さは9です。

$aspect-ratio-width: 16;
$aspect-ratio-height: 9;

$aspect-ratio-percentage: percentage($aspect-ratio-height / $aspect-ratio-width);

$aspect-ratio-width: 16; と $aspect-ratio-height: 9;：16:9のアスペクト比を定義します。
$aspect-ratio-percentage: percentage($aspect-ratio-height / $aspect-ratio-width);：高さを幅で割り、percentage()関数を使ってパーセンテージ値に変換します。この場合、percentage(9 / 16) となり、結果は 56.25% です。

次に、計算したアスペクト比を使って動画コンテナのスタイルを定義します。

.video-container {
  position: relative;
  width: 100%;
  padding-top: $aspect-ratio-percentage; // アスペクト比に基づいてパディングを設定
  
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
}

.video-container：動画コンテナの幅を100%に設定し、パディングトップをアスペクト比に基づいて設定します。これにより、コンテナは常に指定したアスペクト比を維持します。
iframe：動画フレームをコンテナ内で絶対位置にし、幅と高さを100%に設定します。これにより、動画フレームは常にコンテナのサイズに合わせてリサイズされます。

percentage()関数を使うことで、動画のアスペクト比を簡単に計算し、スタイルを適用できます。この方法を使うと、埋め込み動画がレスポンシブに表示され、常に正しいアスペクト比を維持できます。動画コンテナの幅を変えるだけで、動画のサイズも自動的に調整されるため、様々なデバイスや画面サイズに対応可能です。
この方法を使うことで、埋め込み動画のアスペクト比管理が簡単になり、コードのメンテナンス性も向上します。