SCSSで変数を定義すると便利で時短に繋がる！
はてなブログテーマ制作に、「Boilerplate」を使用した場合、変数用のファイルとして、「_variable.scss」というファイルが存在します。
このファイルの中身を参考に、自分なりに色々と変数を作っていきます。
テーマ制作を二つ、三つとする場合も、変数を作っておけば引き継ぎが簡単ですし、スタイルの変更も楽だし、とってもおすすめです。
変数とは
現在使用中のテンプレート「パステルノート」を例とします。
このテンプレートでは、ピンクは#F8D2CF、緑色は#D6ECCB、水色は#BEDBD9を使用しています。
色を毎回指定してもいいですが、例えば「ピンクをもう少し濃いピンクにしたい！」なんて時、全てのコードを変更していくのは骨の折れる作業です。
変数の一例
そんな時、変数を使っていたらどうでしょう。
変数は、
$変数名 : コード;
で指定します。
例えば、_variable.scssファイルに
$pink: #F8D2CF;
と変数を作ります。
そうしたら、呼び出すときには
_core.scssファイルに
h2{ color: $pink; }
と記入するだけ。
このピンクを変えたいときは、
$pink: #変更後のカラー;
でOK。
とっても時短で便利です！
変数に入れると便利かも？リスト
ここからは、私がはてなブログのテーマ制作において、よく使った変数を紹介します。
フォント指定
フォントを変えたいときは変数の中身を変えるだけ。
ぶっちゃけscssファイルの割と先頭に記述してあるので、いちいち変数として作っておかなくても探し出せますが、念のため。
_variable.scssへ記述
$main: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
_core.scssファイルへ記述
body { font-family: $main; }
ブログアイコンの指定
ブログアイコンもよく使うので、指定しておくと便利です。
合わせて@mixinも設定しておくと、呼び出し時のコード量を減らせて楽ちんです。
アイコンははてなブログで使えるブログアイコンを指定。
はてなブログで使用できるブログアイコンについては、scssファイルにfont-family:blogicon;を記載することでで使える。
参考
_variable.scssへ記述
$blog: blogicon; //font-family指定用 /*以下アイコンの変数名指定*/ $time: \f043; //時計 $folder: \f022; //フォルダ $entry: \f013; //記事 $code: \f038; //コード</> $right: \f006; //右> $check: \f029; //チェック $list: \f039; //リスト $link: \f042; //リンク $new_window: \f009; //外部リンク $pin: \f727; //ピン $pen: \f024; //ペン $comment: \f01d; //吹き出し $edit: \f010; //編集 $calendar: \f03a; //カレンダー $star: \f02d; //星 $search: \f01a; //検索 $more: \f710; //・・・用 $quote: \f704; //引用 $tag: \f04a; //タグ
_core.scssファイルへ記述
例えばカテゴリー横にフォルダアイコンを表示させたい場合。
.categories a:before{ content:"$folder"; font-family:$blog; }
cssでの結果
.categories a:before { content: "\f022"; font-family: blogicon; }
ブラウザでの見た目
ブログアイコンの指定その２@mixinを使用した場合
@mixinを使えば、毎回content:'\f022';とかfont-family:blogicon;とか書かなくてもよくなり、何度も使う場合に便利。
@mixinには、ややこしくならないよう別ファイルを用意するのをおすすめします。
私は_function.scssという名前で作りました。
新しいファイルを作ったら、boilerplate.scssファイルに
@import "lib/_function";と追記します。
この時、変数の記載したファイルは_coreファイルよりも先に記述します。
以下boilerplate.scssファイル記述の一例
@charset "utf-8"; /* Theme: パステルノート Author: micche Responsive: yes Description: パステル調のふんわりしたしたテンプレートです。 マスキングテープっぽいデザインで透け感が特徴です。 */ // import normalize @import "node_modules/normalize.css/normalize"; // import variable @import "lib/_variable"; // 変数と関数 @import "lib/_function"; // import core @import "lib/_core"; // 増やしたかったら@import "~/~";で増やす // 変数ファイルを先に記述すること
_function.scssへ記述
@mixin icon($content:'', $fontfam:$blog){ content:unquote("\"") + $content + unquote("\""); font-family:$fontfam; }
解説
$contentの中身は初期設定で空にしてあります。
ここに入れたいアイコンの変数名を指定すると、自動的にそのあとのfont-familyも記載されるように設定してあります。
尚、ブログアイコンには\があり、これが呼び出し時にうまくいかないので、contentの中身はunquote("\"")で括ってあります。
@mixinの取り出し方
@include icon($変数名前);
カンマで区切るか、特定の名前引っ張って値を上書きします。
@include icon;
で初期値となります。
_core.scssファイルへ記述
先ほどと同じく、カテゴリー横にフォルダアイコンを表示させたい場合。
.categories a:before{ @include icon($folder); }
cssでの結果
.categories a:before { content: "\f022"; font-family: blogicon; }
メディアクエリ（レスポンシブデザイン）
こちらは元々_variableファイルに記載されていたものに追加しました。
_variable.scssに記述
// Media Queries $mq-xs: "(max-width: 480px)"; //スマホ(0px-480pxに適応) $mq-tb: "(max-width:767px)"; //スマホ横・タブレット(0px〜767pxに適応) $mq-sm: "(min-width: 768px)"; //タブレット(768px以上に適応) $mq-md: "(min-width: 992px)"; //PC用(992px以上に適応) $mq-lg: "(min-width: 1200px)"; //PC用(1200px以上に適応)
_core.scssファイルに記述
例えばレスポンシブデザインで、PCでは2カラム、iphoneなどスマホでは1カラムにしたい場合
#content-inner { display: flex; flex-direction: column; //スマホでは1カラム設定 justify-content: space-around; @media #{$mq-sm} { flex-direction: row; //タブレットやPCでは2カラム設定 } }
FlexBoxについては以下サイト様が参考になります
cssでの結果
#content-inner { display: flex; flex-direction: column; justify-content: space-around; } @media (min-width: 768px) { #content-inner { flex-direction: row; } }
