使いまわして楽しよう！CSSの便利mixin集

CSSを書いていると「あれ、同じような記述何度も書いているな..」となることが結構ありますよね。

似た記述が増えると実装の手間、修正時の手間が増えていってしまいます。

この問題を解決するためにはいろいろな手法が考えられます↓

①共通部分をコンポーネント（モジュール）として切り分ける
②汎用のclassを用意して、必要なところで適用していく
③記述をまとめたmixinを用意して、必要なところで適用していく

この記事では③を選択した際に便利に使えるmixinを紹介していきたいと思います。

どんな時にmixinを使うのがいいのか

具体的なmixinの中身に入っていく前に、「上記の手法の①や②でもいいんじゃない？」と思った方向けに、自分の考えを書いておきます。

「①共通部分をコンポーネント（モジュール）として切り分ける」が適しているケース

それはプロジェクトのコンポーネントの切り分けルールと適合する場合です。

AtomicDesignの考え方をはじめとして、コンポーネントの切り方にはさまざまなルールが考えられ、プロジェクトごとに何かしらのルールが採択されているはずです（明文化されていないケースもよくありますが）

このルールと、共通スタイルを当てたい要素の粒度がそろうかは重要です。

共通スタイルを当てたいがためにコンポーネントを切り分け始めると、粒度がバラバラになってしまい、管理が難しくなってしまいます。

「②汎用のclassを用意して、必要なところで適用していく」が適しているケース

こちらはclass名の付与ルールに違反しない場合です。

class名のルールとしてマルチクラスを許容していないこともあるかと思います。
その際には、汎用classを追加で付与するのはルール違反になります。

逆に汎用class（ユーティリィクラス、ヘルパークラスなどと呼ばれることも）を組み合わせて、スタイルを実現している場合には、同じスタイルをまとめてclassを適用していけるでしょう。

mixinの記法

前提知識としてmixinの記法をPostCSS（postcss-mixins）ベースで簡単に説明します。

※以降の記述はPostCSS準拠になりますので、SASSやStyledComponentsなどで使う場合は適宜置き換えつつ使ってください。

PostCSSでmixinを定義する際は @define-mixin で「mixinを定義するよ！」と宣言し、その後に mixinの名前 を続け、必要に応じて $引数名: デフォルトの値 を記述します↓

mixin定義の例


@define-mixin someLabel $padding: 4px, $fontSize: 12px {
  padding: calc($padding / 2) $padding;
  background-color: #aaa;
  font-size: $fontSize;
}

定義したmixinを以下のように使います↓

mixin使用の例


.sample {
  @mixin someLabel 8px, 14px;
}

引数が不要な場合はもっとシンプルに記述できます↓

引数無しのmixin定義の例


@define-mixin simpleLabel {
  padding: 2px 4px;
  background-color: #aaa;
}

最初は少し見慣れないかもしれませんが、あまり難しい書き方もなく、すぐに慣れることができるのではないでしょうか。

おすすめmixin集

お待たせしました！ここから本題である、便利なmixinの中身について話していきます。

float解除のclearfix

flexやgridが便利に使えるようになったこの時代ではもう使わないかもしれませんが、floatの回り込みを解除したい時に使えるmixinです。

clearfix


@define-mixin clearfix {
  &::after {
    content: '';
    clear: both;
    display: block;
  }
}

floatした要素は文字通り浮いてしまうため、そのままだと後続の要素が下に入り込んでしまい、背景色などが意図しない範囲に影響してしまうことがあります。

そのような入り込みを解除する際に使えるのがclearfixで、後続の要素への影響を無くすことができます。

領域を残しつつテキストを非表示にする

テキストの領域を残しながら非表示にして、画像を表示したい時に使うmixinです。
テキストをHTML上では残しておきつつ、画像を表示したいときに使えますね。

text-indent: -9999px; は text-indent: 200%; のような値でも問題ありません。

textIndentImg


@define-mixin textIndentImg {
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}

テキストを非表示にするが読み上げる

読み上げブラウザーなどで読み上げて欲しいけど、表示したくない時に使うmixinです。
単純に display:none すると読み上げもされなくなるため、注意が必要です。

readOnly


@define-mixin readOnly {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
}

リンク色をまとめて指定

サイト全体で同じリンク色のルールにできる場合は不要ですが、リンクごとに「ここはvisitedで色を変えたい/変えたくない」がある場合などには、そのための記述をまとめておくと便利です。

visitedLink


@define-mixin visitedLink {
  color: #22b;

  &:visited {
    color: #609;
  }

  &:hover {
    color: #54d;;
  }
}

※ カラーコードは必要に応じて変更してください

文字詰め

大きい文字のタイトル部分だけ適宜文字詰めをしたい！時などに便利なmixinです。

font-feature-settings: "palt" だけだと少し詰まりすぎてしまうので、好みに応じて letter-spacing も指定しておくのがおすすめです。

characterPacking


@define-mixin characterPacking {
  font-feature-settings: "palt";
  letter-spacing: 0.06em;
}

縦横比率を維持しつつレスポンシブ対応する画像

ちょっとトリッキーな書き方でいつも迷ってしまう、縦横比率の維持もmixinにしておけばすぐに使うことができます。

resposiveImage


// 引数で縦横比率を指定。
// この例ではデフォルトとして16:9を指定。
@define-mixin resposiveImage $horizontalRatio: 16, $verticalRatio: 9 {
  position: relative;
  display: block;
  width: 100%;
  // paddingが横幅から計算されるというCSSの特性を使い、
  // 横幅に比率を掛けて高さを指定
  padding-bottom: calc(100% * ($verticalRatio / $horizontalRatio));

  img {
    // 親要素の上下中央に配置
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
  }
}

このmixinを使えば、以下のイメージのように端末の幅が変わっても要素の比率を保つなどが可能になります。

子要素がimgである必要はないので、img を > * に変えてどんな要素にでも適用する、などのカスタマイズも可能です。

まとめ

以上、自分がよく使うmixinをご紹介しました。

「何度も同じことを書いているな？」と思った時がmixin作成のタイミングです。

一度作ってしまえば、あとはいくらでも使いまわしが出来、コードの品質が担保できるのがmixinのいいところです。
うまく使って、スピーディーにコードを書いていきましょう！

この記事をシェアしてくれると小躍りします