SCSSのよく使う変数10選+αとmixin4選|UWEBUWEB本文まで飛ばすその他のページへの移動にお使いください。スクロールすることができます。2019.08.14こんにちは。なな(@nana_winter_web)です。便利なSCSSのよく使うmixinや変数が決まってきたので紹介します。変数がないとmixinの内容がよくわからないと思うので変数から紹介しますね。全部入りfocusの疑似クラスがいらない場合focusとopacityがいらない場合opacityのみ不要な場合まとめよく使う変数10選+αプラスアルファ色関係の変数がほとんどです。変数の命名規則は、色とか、幅とかのカテゴリーの後にアンダーバーを付けて、用途という感じにしてます。ease-in-out;最後の2つ、hover_opacityとanime_nomalというのは命名規則から外れている気がするのですが。anime_nomalというのはtransition用の変数で、いつも、0.2秒だったか0.3秒だったか忘れるので用意しました。hover_opacityというのは、不透明度でマウスオーバーを表現するとき用の変数です。これも、いつも0.8だったか0.7だったか忘れてしまうので用意しています。#ef4156;サイトによっては、SNSのメインカラー用の変数も用意することがあります。SNSのメインカラーなんて、サイト内でそこまで使うものでもないし、SNSの名前のclassを付けることがほとんどなので、なんの色かわからないということはありません。その時によって、メインカラーが変わったり、メインカラーを紹介しているサイトによって若干カラーコードの数字が違ったりするので、統一するために用意しています。mixin4選メディアクエリ用mixinスマホベースでコーディングして、タブレットの時やパソコンの時に適用するスタイルはセレクタの中に書くことにしています。セレクタの中にメディアクエリを書くと、セレクタの数くらいのメディアクエリを書かないといけなくなって、面倒なので、mixinを用意しました。mixinとは関係ありませんが、セレクタの中にメディアクエリを書くと、無駄な上書きが減るので、おすすめです。}}mixinを使えば、ブレイクポイントが変更になった場合も、1か所変更するだけでいいので管理が楽になります。}}もっと分岐させれば、ブレイクポイントを増やすこともできます。前まで、スマホ用のメディアクエリも用意していましたが、タブレットの時から無効にすればいいし、min-widthとmax-widthが混ざっていると境目でスタイルが適用されなかったりするので、なくしました。使い方は簡単で、引数にtabletかpcを指定し、{}の中にそれぞれのブレイクポイントの時に適用するスタイルを記述するだけです。一応、引数は空にできないようにしています。$width_pc;}センタリング用mixinいらないかなと思いつつも、なんやかんやで使っているmixin。基本的に先に紹介した、幅用のmixinとセットで使います。数値);上下共通のときは、上のように指定する。数値);マウスオーバー関連のmixin&:hover,&:active,&:focusって長いなと思って作ったmixin。hover時はopacityを付けることが多いのですが、いらないこともあるので必要か不要かを選べるようにしました。つけ忘れがちなtransitionはデフォルトでつけておきました。内容}まとめ変数やmixinを活用することで、変更や修正に強くなり、短い時間でコードを書けるようになります。この記事で紹介した変数やmixinは自由に使ってください。一応、コンパイル結果は確認していますが、うまく動かなくても責任はとれませんので、そのあたりはご了承ください。各ページへの移動に利用してください。なな2002年生まれ。アクセシビリティに配慮したサイトを作りたい。Meツイッターをフォローする。新しいタブで開きます。コードペンをフォローする。新しいタブで開きます。ギットハブをフォローする。新しいタブで開きます。Feedlyで購読する。新しいタブで開きます。UWEBこのページのトップに戻る。