プロ級コーダーの秘密兵器！最強のSass MixinとFunction

Maximize Your Workflow with These SASS Mixins and Functions

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

---

同じCSSを何度も書いていたり、異なる画面サイズでデザインをレスポンシブにするのに苦労したことがありますか？そんなあなたにぴったりの記事です。この記事では、私の作業フローをずっとスムーズにしてくれた、非常に便利なSASSミキシンと関数をいくつか紹介します。これらの小さなツールは、コードをDRY（Don't Repeat Yourself）に保ち、レスポンシブデザイン、レイヤリング、キャッシュバスティングなどを簡単にすることで、多くの時間と労力を節約してくれました。

ピクセルをremに変換したり、レイアウトをクリーンにするためにz-indexを扱ったり、再利用可能なヘルパークラスを作成したりと、さまざまな用途に役立つものを用意しました。これらのミキシンと関数をプロジェクトに簡単に取り入れて、すぐに使い始めることができます。

ここで紹介する例は改良や拡張が可能で、オンラインではさらに多様な例を見つけることができます。しかし、これらは私が個人的に最もよく使うものです。早速見ていきましょう！

1. ピクセルからRemへの変換関数

ピクセル値をremに変換します。

@function rem($pixel) {
  $convertedValue: ($pixel / 16) + rem;
  @return $convertedValue;
}

// 使用例
div {
  font-size: rem(32);
  width: rem(600);
}

2. レスポンシブデザイン用のメディアクエリミキシン

メディアクエリを使用したレスポンシブデザインのための、シンプルで読みやすいミキシンの使用法です。

@mixin small {
  @media only screen and (max-width: 768px) {
    @content;
  }
}

@mixin medium {
  @media only screen and (max-width: 992px) {
    @content;
  }
}

@mixin large {
  @media only screen and (max-width: 1200px) {
    @content;
  }
}

// 使用例
.title {
  font-size: 16px;

  @include small {
    font-size: 14px;
  }
  @include medium {
    font-size: 18px;
  }

  @include large {
    font-size: 20px;
  }
}

3. 階層的レイヤリング用のZ-Index関数

このセットアップにより、レイアウトに視覚的なレイヤーの明確な階層を持たせながら、柔軟性とスケーラビリティを維持することができます。

$z-index: (
  dropdown: 6,
  mobileMenu: 7,
  stickyHeader: 8,
  tooltip: 10,
  modalBackdrop: 11,
  modal: 12,
  header: 15,
  notificationToast: 18,
  spinner: 20,
);

@function z-index($key) {
  @return map-get($z-index, $key);
}

.header {
  z-index: z-index(header);
}

4. 単一または複数の背景画像のキャッシュバスティング

IDを使用して背景画像をキャッシュします。

$imageId: unique_id();

@mixin cacheBustBgImages($urls...) {
  $backgroundImages: ();

  @each $url in $urls {
    $backgroundImages: append(
      $backgroundImages,
      url("#{$url}?v=#{$imageId}"),
      comma
    );
  }
  background-image: $backgroundImages;
}

// 単一画像の使用例
.hero {
  @include cacheBustBgImages("asset/images/image.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

// 複数画像の使用例
.hero {
  @include cacheBustBgImages(
    "asset/images/image.png",
    "asset/images/other-image.png"
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

5. フォントのキャッシュバスティング

IDを使用してアプリのフォントをキャッシュします。

$fontId: unique_id();

@font-face {
  font-family: "Custom Fonts";
  src: url("asset/images/custom-font.eot?v=#{$fontId}");
  src: url("asset/images/custom-font.eot?v=#{$fontId}#iefix") format("embedded-opentype"),
    url("asset/images/custom-font.woff2?v=#{$fontId}") format("woff2"),
    url("asset/images/custom-font.woff?v=#{$fontId}") format("woff"), url("asset/images/custom-font.ttf?v=#{$fontId}")
      format("truetype"),
    url("asset/images/custom-font.svg?v=#{$fontId}#svg") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

6. 絶対位置指定

要素を絶対位置指定するためのミキシンです。top、right、bottom、leftの順序が重要です。

@mixin absolute($top, $right, $bottom, $left) {
  position: absolute;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

// 使用例
div {
  @include absolute(100px, 100px, auto, auto);
}

7. テキストの省略記号

オーバーフローするテキストを省略記号で切り詰めます。

@mixin text-ellipsis($max-width: 100%) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: $max-width;
}

// 使用例
.element {
  @include text-ellipsis(200px);
}

8. アイテムのホバー

ホバー状態のために、特定のプロパティを渡すことができます。

@mixin item-hover($color, $bg-color) {
  &:hover {
    color: $color;
    background-color: $bg-color;
  }
}

// 使用例
.button {
  @include item-hover(white, black);
}

9. 再利用性のためのヘルパークラス

// 子要素を縦横中央に配置
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

// 要素を縦横中央に配置
.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// テキストを中央揃え
.text-center {
  text-align: center;
}

// 要素を非表示
.hidden {
  display: none;
}

// デスクトップビューで要素を非表示
.d-none-desktop {
  @media screen and (min-width: 680px) {
    display: none;
  }
}

// モバイルビューで要素を非表示
.d-none-mobile {
  @media screen and (max-width: 680px) {
    display: none;
  }
}

// 要素に角丸を追加
.border-radius {
  border-radius: 10px;
}