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」の使い方を簡単に紹介しました！
何かの参考になれば幸いです。
