BEMをSassで書き、CSSにコンパイルしてみる【day56】

プログラミング独学day56の学習で、得たことや気づきを教えて！

今日は

・BEMをSassで書き、CSSにコンパイルしてみる

をアウトプットします！

こんにちは。プログラミングでweb制作ができるようになりたいharu(@fuwafuwahappy)です。

2歳0歳の育児をしながら、22時〜1時に独学しています！

→プログラミング学習day56、もりけん塾day12

わかったことや、気付きをログに残します。

同じく初学者の人が、これをみてインプットや復習ができるように書いていきます。

BEMをSassで書き、CSSにコンパイルしてみる
- まず、BEMとSassの復習をしました
- BEMをSassで書く方法
SCSSをCSSにコンパイルしよう
あとがき

BEMをSassで書き、CSSにコンパイルしてみる

BEMをSass表記で書く方法を学んだのでアウトプットします。

学習目的：明日からの模写で、BEMをSass表記を使って書く練習がしたい

ゴール：Sassの「ネスト/mixin」でBEMを書けるようになる

まず、BEMとSassの復習をしました

①BEMの書き方

＊参考書籍は「CSS設計の教科書」

②Progateで学んだSassの基本

＊これに加えて、たにぐちまことさん(@seltzer)のyoutubeで学習。
→4回にわたる講座、めちゃめちゃわかりやすかったのでおすすめです。

BEMをSassで書く方法

明日からの模写では、次の２つを実際に使ってみます。

BEMをネストを使って書いてみる

ネストとは、セレクタを入れ子のように書く表記のことでした。

BEMを使った以下のようなセレクタがあった時、

header__logo{}
header__link{}

Sassを使うとこのように書くことができます。

header{
　　　　　　&__logo{} 
　　　　　　&__link{}
}

&(親要素を参照)を使って、__以下を入れ子のセレクタにできる。

＠mixinと変数使ってメディアクエリを書いてみる

【復習】
・変数は、繰り返し使うことができる値を入れた箱
・mixinは、いくつかのコードを1つにまとめて何度も呼び出せる

mixinと変数をつかったメディアクエリの表記方法は、こちらを参考にしました。

【コピペOK】Sassで簡単にメディアクエリを使用する方法｜macoblog

この記事では「Sassを使ったメディアクエリの書き方」について解説しています、Sass特有の「変数」「ミックスイン(@mixin)」「インクルード(@include)」の３つを組み合わせることでレスポンシブ指定を効率化させます。コーディング...

①実際にメディアクエリを書いてみる。(上記HPより)
まずは、定義から。

$pc: 1024px; // PC
$tab: 680px; // タブレット
$sp: 480px;  // スマホ

@mixin pc {
  @media (max-width: ($pc)) {
    @content;
  }
}
@mixin tab {
  @media (max-width: ($tab)) {
    @content;
  }
}
@mixin sp {
  @media (max-width: ($sp)) {
    @content;
  }
}

【解説】

①まず「変数」$PC: 1024pxを定義。

②次に、「@mixin」を使ってメディアクエリの表記を保存。
引数には、先ほどの「変数」を入れておきます。

② ＠includeで呼び出す

レスポンシブ対応をしたい場所で使います。

.btn {
  @include pc {
    background-color: red;
  };
  @include tab {
    background-color: blue;
  };
  @include sp {
    background-color: yellow;
  };
}

@mixinでメディアクエリを書くメリット

①@includeで呼び出すことで、1箇所だけで完結する
→通常だと、PC,タブレット,スマホの離れた場所にある@mediaに、レスポンシブ対応を書く必要があった

②記述量を大幅にカットできる