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

@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.

@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;
}

html{font-size:62.5%;}

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

@include font-size(18);