いまいち@mixinの使い方がわからない

Sassの入れ子のシステムや変数の宣言などはなんとなくわかったけれど、@mixinを用いたメディアクエリのシステムがよくわからず。 なので、Day7に戻って復習。

メディアクエリのサンプル例

//マップ型変数breakpointsを定義
$breakpoints: (
//キー　　値
  'sp': 'screen and (max-width: 767px)', //767px以下（スマホ）用の表示
  'pc': 'screen and (min-width: 768px)' //768px以上（タブレット・PC）用の表示
) !default;

//メディアクエリ用のmixinを定義。デフォ値はsp
@mixin mq($breakpoint: sp) {
//map-get(マップ型変数, キー)で値を取得
  @media #{map-get($breakpoints, $breakpoint)} {
    //この中をカスタムできる
    @content;
  }
}

//使用例
.header {
  height: 100px; //ＰＣ用の表示

  @include mq(sp) {
    height: 60px; //スマホの時だけ高さを60pxに！
  }
}

/*このように @media screen and (width: 767px) { } を書かなくても、
PC用のcssを書きながらスマホ用の表示を書き足すことができます！ */

マップ型変数とは？

マップ型変数というのは、

$breakpoints: (
//キー　　値
  'sp': 'screen and (max-width: 767px)', //767px以下（スマホ）用の表示
  'pc': 'screen and (min-width: 768px)' //768px以上（タブレット・PC）用の表示
) !default;

のように、変数内にいくつか階層？を持たせて、複数の値を指定すること、と理解。

mixinを指定する

@mixin mq($breakpoint: sp) {
//map-get(マップ型変数, キー)で値を取得
  @media #{map-get($breakpoints, $breakpoint)} {
    //この中をカスタムできる
    @content;
  }
}

mqを$breakpointsで指定した変数のうち、’sp’をデフォルトとしてmixinを作成。 include　mq(pc)とすれば、PCサイズのメディアクエリを指定できる。

contentはどんな時に使う？

ここに入っている@content。もし全てのメディアクエリデザインに共通で使用したいデザインがあった場合は、ここに入力することで引用先でも、そのデザインを引っ張って使うことができる。 どんな時に使うんだろう…??と思ったので、GPTに聞いてみた。

@mixin mq($breakpoint: sp) {
  @media #{map-get($breakpoints, $breakpoint)} {
    .my-class {
      font-size: 16px;
      color: blue;
      margin: 0 auto;
      width: 100%;
      @content;
    }
  }
}

@includeによって各セクションやクラスに入れ子的にメディアクエリを書いていくことを想定すると、@contentで指定して毎回ひっぱって行く必要のある要素って…?? となってしまって、なんだかよくわからない。他サイトの模写とかやってたらこの使い方についてわかるのかな？

初級編をもう一回復習

Day８は、初級編で作成したHTML/cssファイルをsassに変更するという課題だったので、初級編を１から総復習して作成し直し！

.header {
  &-right {
    float: right;
    @include mq(sp) {
      float: none;
    }
  }

入れ子とmixinを使用しながら、できるだけコンパクトにcssを当てる。 入れ子やりすぎると、余計複雑な構造になってしまっている気がする…。 簡潔に、簡潔に、を意識してコード書くの苦手すぎるので、以下の教材を見ながらクリーンコードについて勉強したいと思います。
プログラミング中級者になりたい人のためのクリーンコード入門