Sass の便利な機能「@mixin」の使い方

Sass の便利な機能「@mixin」の使い方について紹介します。

基本的な書き方

基本的な書き方は下記のようになります。

@mixin title_abc($color: #333, $fontSize: 22px) {
  color: $color;
  font-size: $fontSize;
}

.title {
  @include title_abc();
}

.title_light {
  @include title_abc(#777, 20px);
}

「@mixin」で名前と変数、スタイルを定義して、「@include」で呼び出します。

そのまま使いたい場合は、「@include title_abc();」のように引数を渡さずに使い、変更したい場合は「@include title_abc(#777, 20px);」のように引数を渡します。

cssに展開したあとは下記のようになります。

.title {
  color: #333;
  font-size: 22px;
}

.title_light {
  color: #777;
  font-size: 20px;
}

メディアクエリを管理

まず、ブレイクポイントを変数で定義します。
変数で定義しておくことで、あとでの変更が簡単にできます。

$sm: "600px";
$md: "900px";
$lg: "1200px";

@mixinを定義します。
「@content」はスタイルセットを@mixinに渡す機能です。
@includeで書いた内容がこの場所に展開されます。

@mixin media-max($size) {
  @media screen and (max-width: $size) {
    @content;//展開される場所。この場合「.class {color:red}」
  }
}

「@include」で定義した、@mixinを呼び出します。
$lgのところは変数ではなく、「1000px」などのように書くと個別での対応もできます。

@include media-max($lg) { 
  .class {color:red}
}

今回は「$lg: “1200px”」なので下記のように展開されました。

@media screen and (max-width: 1200px) {
  .class {
    color: red;
  }
}

擬似要素で三角形を作る

三角形を作りたい時に用意しておくと便利な@mixinです。
ジェネレータを使わずに作成することができるので、用意しておくと便利です。

@mixin triangle($direction, $width, $height, $color){
  content:"";
  width: 0;
  height: 0;
  border-style: solid;
  display: inline-block;
  $widthNum: $width / 2;
  $heightNum: $height / 2;
  @if ($direction == top) {
    border-width: 0 $widthNum $height $widthNum;
    border-color: transparent transparent $color transparent;
  } @else if ($direction == left) {
    border-width: $heightNum $width $heightNum 0;
    border-color: transparent $color transparent transparent;
  } @else if ($direction == right) {
    border-width: $heightNum 0 $heightNum $width;
    border-color: transparent transparent transparent $color;
  } @else if ($direction == bottom) {
    border-width: $height $widthNum 0 $widthNum;
    border-color: $color transparent transparent transparent;
  }
}

.arrow::after {
  // top:上向き bottom:下向き right:右向き left:左向き
  @include triangle(right, 6px, 10px, blue);
}

展開されるcssは下記のようになります。

.arrow::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  display: inline-block;
  border-width: 5px 0 5px 6px;
  border-color: transparent transparent transparent blue;
}

remを使用した文字サイズわかりやすくする

フォントサイズをremで指定するときに、1.5remと書くと思うのですが、パッとどれぐらいのサイズかイメージしずらいです。
そのためあらかじめ@mixinを用意しておくとイメージしやすくなります。

@mixin rem($size) {
  font-size: $size + px;
  font-size: ($size / 16) + rem;//既定値を16pxに設定した時
}

h1{
  @include rem(24)
}

p{
  @include rem(16)
}

展開されるcssは下記のようになります。

h1 {
  font-size: 24px;
  font-size: 1.5rem;
}

p {
  font-size: 16px;
  font-size: 1rem;
}

今回はSassの便利な機能「@mixin」の使い方を簡単に紹介しました！
何かの参考になれば幸いです。

コメント