WEB Tips デザイン・コーディング

SCSS mixinの使い方とレスポンシブサイトで使えるおすすめ実例集

2014-02-16

本記事にはプロモーションが含まれています。

SCSS mixinの使い方とレスポンシブサイトで使えるおすすめ実例集

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

SCSSはは簡潔かつ読みやすいCSSコードを書くことができる上に、効率的にコーディングできるCSSの拡張言語です。使い始めた頃は便利さに驚愕していました。その中でも特に便利なのはmixinですね。

mixinを定義しておけば、同じスタイルを何度も書かずにすむので効率が上がります。この記事では、SCSS mixinの使い方について解説し、実際の使えるおすすめの実例集を紹介します。SCSS、mixinを活用することで高速かつ効率的なフロントエンド開発を進めましょう!

mixinの基本的な使い方

mixinとは複数のプロパティをまとめて再利用できる機能です。mixinを定義すると、定義したプロパティを必要な場所で呼び出すことができます。

mixinを使うことで、同じプロパティを何度も記述する必要がなくなり、コードの再利用性が向上します。また、コードを修正する場合には、mixinの定義部分の修正だけで済むためメンテナンスがしやすくなります。

/* ボタンのスタイルを定義したmixin */
@mixin button($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* mixinを呼び出す1 */
.button-primary {
  @include button(#007bff, #fff);
}

/* mixinを呼び出す2 */
.button-secondary {
  @include button(#6c757d, #fff);
}

上の例では、buttonというmixinを定義し、引数に$bg-color$text-colorを設定します。

.button-primary.button-secondaryというクラスで、@includeを使用してbuttonを呼び出しています。引数を指定してそれぞれのクラスに対して異なる背景色と文字色を適用します。

よく使うmixinの実例集

ここからはレスポンシブサイトのコーディングで使う機会が多いmixinの実例を上げていきます。

ブレイクポイントとメディアクエリーを簡単に記述するmixin

レスポンシブサイトで重要な役割を持つ、ブレイクポイントに応じたメディアクエリーの設定も、mixinで管理すれば簡単になります。

See the Pen Untitled by mixtaro (@mixtaro) on CodePen.

$breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

@mixin breakpoint($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @error "ブレイクポイントは存在しません: #{$breakpoint}.";
  }
}

$breakpointsという変数に各ブレークポイントのサイズを設定します。@mixin respond-toでは、引数として渡されたブレークポイントのサイズを取得し、@mediaルールを生成します。

@contentを使用することで、呼び出し元のスタイルを@mediaルール内に挿入することができます。また、引数で指定されたブレークポイントが定義されていない場合はエラーを出力します。

レスポンシブなカラム設定のmixin

See the Pen Untitled by mixtaro (@mixtaro) on CodePen.

@mixin responsive-columns($columns, $gap: 20px, $width: 100%) {
  display: flex;
  flex-wrap: wrap;
  margin: -$gap / 2;
  > * {
    padding: $gap / 2;
    width: 100%;
    max-width: $width;
    @media (min-width: 768px) {
      width: calc(100% / #{$columns} - #{$gap});
      max-width: none;
      margin: $gap / 2;
    }
  }
}

768px以上のとき、$columnsで指定した列数に応じてカラムをレイアウトします。$gapはカラム間のマージンです。768pxより小さい場合はwidth:100%になります。

レスポンシブな背景画像を表示するmixin

PC、スマホで背景画像を変える場合のmixin。Retinaディスプレイにも対応します。

@mixin bg-image($file-sm, $file-pc, $width: auto, $height: auto) {
  // スマホ用
  background-image: url('#{$file-sm}');
  background-size: cover;
  // PC用
  @media (min-width: 769px) {
    background-image: url('#{$file-pc}');
    background-size: cover;
  }
  // Retina対応
  @media (-webkit-min-device-pixel-ratio: 2),
         (min-resolution: 192dpi) {
    background-image: url('#{$file-pc}');
    background-size: cover;
    // Retinaの場合、背景画像のサイズを指定しておく
    width: $width / 2;
    height: $height / 2;
  }
  // 指定されたサイズがある場合、そのサイズに設定
  @if $width != auto {
    width: $width;
  }
  @if $height != auto {
    height: $height;
  }
}

画面サイズが768px以上の時はbackground-size:cover、それ以外はbackground-size:containにします。

テキストにグラデーション

mixinで定義しておけば、色を指定するだけでテキストにグラデーションをつけられます。

@mixin text-gradient($color-1: #000, $color-2: #fff) {
  background: linear-gradient(to right, $color-1, $color-2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color:$color-1;
}

backgroundプロパティで文字の背景に線形グラデーションを設定し、
-webkit-background-clipプロパティで文字をくりぬきます。
さらに-webkit-text-fill-colorプロパティで「くり抜いた背景を透明にする」ことで、テキストにグラデーションを適用しています。

第1引数にはグラデーションの開始色、第2引数にはグラデーションの終了色を設定します。念のため非対応ブラウザ用にcolorプロパティでテキストの色を指定しておきます。

背景グラデーション

@mixin gradient-bg($start-color, $end-color, $direction: 'top') {
  background-color: $end-color;
  background-image: linear-gradient(to #{$direction}, $start-color, $end-color);
}

ブロック要素にグラデーションを適用します。引数に開始色と終了色、そしてグラデーションの方向を指定することができます。

グラデーションの方向はtop, right, bottom, leftを使います。left top(左上)やright bottom(右下)なども指定可。

See the Pen Mixin - gradient by mixtaro (@mixtaro) on CodePen.

三角の矢印を作る

アイコンがわりにCSSで矢印をつけたいときに。

See the Pen Untitled by mixtaro (@mixtaro) on CodePen.

二等辺三角形が作れます。
引数で初期値を指定しています。$width, $height, $color, $direction
$directionは三角の向き: top / right / down / left を指定します。

フォントサイズに比例して行間を設定するmixin

@function strip-unit($number) {
	@return calc($number / ($number * 0 + 1));
}
@mixin font-size($size, $ratio: 1.6) {
  font-size: $size + px;
  line-height: round(strip-unit($size) * $ratio) + px;
}

strip-unit()関数は単位

フォントサイズをremで指定するmixin

今はもう使う機会はなくなりましたが、remに対応していないIE対策としてremとpxを一緒に指定するmixinです。font-sizeの指定をカンタンにするmixinです。rootのフォンとサイズを10pxにするため、htmlに以下のように指定します。

html{font-size:62.5%;}
@mixin font-size($s:14) {
    font-size:$s + px;
    font-size:($s / 10) + rem;
}

とし、18pxで表示したいところには以下のようにします。

@include font-size(18);

  • この記事を書いた人
  • 最新記事

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

-WEB Tips, デザイン・コーディング
-, ,