こんにちは。やまぐちなな（@nana_winter_web ）です。
便利なSCSSのよく使うmixinや変数が決まってきたので紹介します。
変数がないとmixinの内容がよくわからないと思うので変数から紹介しますね。
よく使う変数10選+αプラスアルファ
色関係の変数がほとんどです。
変数の命名規則は、色とか、幅とかのカテゴリーの後にアンダーバーを付けて、用途という感じにしてます。
$color_base: #eee;
$color_main: #000;
$color_sub: #000;
$color_accent: #000;
$color_text: #333;
$color_link: #04c;
$width_sp: 95%;
$width_pc: 960px;
$hover_opacity: 0.7;
$anime_nomal: all 0.2s ease-in-out;最後の2つ、hover_opacityとanime_nomalというのは命名規則から外れている気がするのですが。
anime_nomalというのはtransition用の変数で、いつも、0.2秒だったか0.3秒だったか忘れるので用意しました。
hover_opacityというのは、不透明度でマウスオーバーを表現するとき用の変数です。これも、いつも0.8だったか0.7だったか忘れてしまうので用意しています。
用意することもある変数
$color_facebook: #3b5998;
$color_twitter: #55acee;
$color_line: #00b900;
$color_pocket: #ef4156;サイトによっては、SNSのメインカラー用の変数も用意することがあります。
SNSのメインカラーなんて、サイト内でそこまで使うものでもないし、SNSの名前のclassを付けることがほとんどなので、なんの色かわからないということはありません。
ただ、その時によって、メインカラーが変わったり、メインカラーを紹介しているサイトによって若干カラーコードの数字が違ったりするので、統一するために用意しています。
mixin4選
メディアクエリ用mixin
スマホベースでコーディングして、タブレット時やパソコン時に適用するスタイルはセレクター中に書いています。 セレクターの中にメディアクエリを書くと、セレクターの数くらいのメディアクエリを書かないといけなくなって、面倒なので、mixinを用意しました。
mixinとは関係ありませんが、セレクタの中にメディアクエリを書くと、無駄な上書きが減るので、おすすめです。
セレクタ{
// スマホ時のスタイル
@include media (tablet){
// タブレット時のスタイル
}
}mixinを使えば、ブレイクポイントが変更になった場合も、1か所変更するだけでいいので管理が楽になります。
@mixin media($break){
@if $break == tablet{
$break: 768px;
}
@if $break == pc{
$break: 1024px;
}
@media screen and (min-width:$break){
@content;
}
}もっと分岐させれば、ブレイクポイントを増やすこともできます。
少し前まで、スマホ用のメディアクエリも用意していましたが、タブレットの時から無効にすればいいし、min-widthとmax-widthが混ざっていると境目でスタイルが適用されなかったりするので、なくしました。
使い方
使い方は簡単で、引数にtabletかpcを指定し、{}の中にそれぞれのブレイクポイントの時に適用するスタイルを記述するだけです。
一応、引数は空にできないようにしています。
@include media (tablet もしくは pc){
// tablet もしくは pcの時に適用するスタイル
}幅用mixin
@mixin width{
width: $width_sp;
max-width: $width_pc;
}センタリング用mixin
いらないかなと思いつつも、なんやかんやで使っているmixin。
基本的に先に紹介した、幅用のmixinとセットで使います。
@mixin center($m:null,$mt:null,$mb:null){
@if $m == null and $mt == null and $mb == null{
// 横以外のmarginがいらない場合
margin: 0 auto;
} @else if $m != null{
// 上下のmarginが共通の場合
margin: $m auto;
} @else if $mt == null and $mb !=null{
// 下のみmarginが必要な場合
margin: 0 auto $mb;
} @else if $mb == null{
// 上のみmarginが必要な場合
margin: $mt auto 0;
} @else {
margin: $mt auto $mb;
}
} // @mixin center使い方
@include center(引数を指定する場合は引数);上下不要
@include center;上下共通
@include center($m: 数値);上下共通のときは、上のように指定する。
上のみ指定
@include center($mt: 数値);下のみ指定
@include center($mb: 数値);マウスオーバー関連のmixin
&:hover,&:active,&:focusって長いなと思って作ったmixin。
hover時はopacityを付けることが多いのですが、いらないこともあるので必要か不要かを選べるようにしました。
つけ忘れがちなtransitionはデフォルトでつけておきました。
@mixin hover($focus:null,$opacity:null) {
transition: $anime_nomal;
@if $focus == none {
// focusが不要な場合
@if $opacity == none{
// focusと不透明度が不要な場合
&:hover,&:active{
opacity: $hover_opacity;
@content;
}
} @else{
// focus のみ不要な場合
&:hover,&:active{
opacity: $hover_opacity;
@content;
}
}
} @else if $opacity == none{
// 不透明度のみ不要な場合
&:hover,&:active,&:focus{
@content;
}
} @else {
&:hover,&:active,&:focus{
opacity: $hover_opacity;
@content;
}
} // @else
} // @mixin使い方
全部入り
@include hover{
// 内容
}focusの疑似クラスがいらない場合
@include hover($focus: none){
// 内容
}focusとopacityがいらない場合
@include hover($focus:none,$opacity:none){
// 内容
}opacityのみ不要な場合
@include hover($opacity:none){
// 内容
}まとめ
変数やmixinを活用することで、変更や修正に強くなり、短い時間でコードを書けるようになります。
この記事で紹介した変数やmixinは自由に使ってください。
一応、コンパイル結果は確認していますが、うまく動かなくても責任はとれませんので、そのあたりはご了承ください。
