Sassを導入した

CSSにも慣れてきたが
ベタベタのベタ書きがあまりにもひどくて目も当てられず

どこに何を書いたか分からなくなる
同じようなスタイルを繰り返し書いている
テーマ全体の色味をコントロールしにくい
とにかく長すぎる

ある程度セクションごとにわけて書いていたが上記のような問題を早めに解決しておきたいと考えてました。

そこでよく聞くSassはどうやらこれらの問題を解決してくれる今をときめくCSSだとか。

Sassには「Sass」と「SCSS」の2種類の記法がありますがSCSSの書き方が一般的との事だったので早速取り入れました。

今回は1番理解が難しかったレスポンシブ化についてフォーカスして書いてみました。

mixinで画面状態を保存して使い回す

SCSSの細かい記法は置いておいて

@mixinでスタイルをあらかじめ作っておいて
@includeで呼び出して使いまわせる

という強力な能力があり
SCSSの入れ子で記述ができるという特徴と組み合わせるとメディアクエリが簡単かつ可読性の高い作り方ができる。

↓イメージ↓

style.scss

@mixin lg {
  //画面サイズがlg以下を意味する記述をする//
}
@mixin md {
  //画面サイズがmd以下を意味する記述をする//
}
@mixin sm {
  //画面サイズがsm以下を意味する記述をする//
}

p{
  color: black;
  @include lg{
    color: red;
    @include md{
      color: blue;
      @include sm{
        color: green;
      }
    }
  }
}

これだけの記述で
lgサイズ以上では黒色
lgサイズ以下では赤色
mdサイズ以下では青色
smサイズ以下では緑色
というレスポンシブ化が可能なのです。

mixinの記述方法

じゃあ肝心のmixin中身はどーすんよって話ですが
まずキーとブレイクポイントの値からなる変数を定義します

style.scss

$breakpoints : (
  "lg":"screen and (max-width:1024px)",
  "md":"screen and (max-width:768px)",
  "sm":"screen and (max-width:480px)"
);

これで
lgのキーは１０２４px以下
mdのキーは７６８px以下
smのキーは４８０px以下
と定義付けができました。

一方mixinはどう書くかというと

style.scss

@mixin mq($breakpoint:md){
  @media #{map-get($breakpoints, $breakpoint)}{
    @content;
  }
}

mqというmixinの引数に上記設定した変数のキーをいれることでメディアクエリの処理をさせる。

まあ＠contentとかmap-getとか、しっかりと理解はしてません。
コピペは強い！
ちなみに引数内の$breakpoint:mdは引数の初期値をmdに設定するよってもの。

実際に使ってみる

実際に使うとどうなるか。

index.html

<body>
  <div class="box red">
    <p>1028px以下で丸に変形</p>
    <p>７６８px以下で非表示</p>
  </div>
  <div class="box blue">
    <p>768px以下で拡大</p>
    <p>４８０px以下で非表示</p>
  </div>
  <div class="box green">
    <p>480px以下で縮小</p>
  </div>
</body>

上記htmlに対し記述するscssは

style.scss

.red{
  background-color: red;
  @include mq(lg){
    border-radius: 50%;
    @include mq(){
      display: none;
    }
  }
}
.blue{
  background-color: blue;
  @include mq(){
    height: 400px;
    width: 400px;
    @include mq(sm){
      display: none;
    }
  }
}
.green{
  background-color: green;
  @include mq(sm){
    height: 100px;
    width: 100px;
  }
}

結果こんな動きをします。

結論

便利！！

おわりに

個人的にやりやすいからmax-widthで指定して
〇〇以下の時どうのこうの
のような書き方をしてましたが、
様々なサイトを参考にするとmin-widthを用いてるのが多かったです。
モバイルファーストを意識するなら〇〇以上の時〜の書き方に慣れるべきですね。