どうもお久しぶりです、りょうた子です。

これまでは、
・フォトショップ
・イラストレータ
を使って、バナーやサムネイルなど「デザイン」をメインで作業していました。

ですが、最近

という「飽き性」特有の症状が出てきたので、ここ数週間コーディングにどっぷり浸かっています。笑

コーディングは楽しいのですが、独学なのでエラーとの戦いの毎日です。

そんなエラーとの格闘を記録として残そう！

と思い、気が向いたら備忘録としてnoteに記事にしてみようと思います。

今回の格闘

一応一通り、コーディングはできるので（もちろんググりまくりのカンニングしまくり）

「新しい技術を取り入れていこう！」と思い、現在「Dart Sass」を導入したコーディングを行っています

今回は「パーシャル」を使って「きれいにわかりやすくscssを管理しようとしました。

ディレクトリはこんな感じ

── sass
    ├── base
    │   ├── _mixin.scss
    │   ├── _reset.scss
    │   └── _variables.scss
    ├── common
    │   ├── _footer.scss
    │   └── _header.scss
    ├── pages
    │   ├── _about.scss
    │   └── _message.scss
    └── style.scss

ヘッダーのスタイルを作っていこう！と思い「_mixin.scss」のファイルに

@mixin flex() { 
 display: flex;
}

というパーツを作りました。

それで「_header.scss」で使うために、

@use '../base/mixin';

.header__wrapper {
  @include flex;
  padding: 30px 70px;

  .header__nav {
    margin-left: auto;
  }
}

「@include」を使って「display: flex;を使い回すぞ！」と意気込んだのですが・・・・

反映されませんでした・・・

結果：無事勝利

「なんでやねん！」と心の中で叫びながら、ググってみるとある記事に辿り着きました。

その記事を見ると

@use '../base/mixin';

.header__wrapper {
  @include mixin.flex;
  padding: 30px 70px;

  .header__nav {
    margin-left: auto;
  }
}

という、「mixin.」という記述をすることで無事コードが実装されました！

Sassはわからんことまみれで大変です。笑

ちなみに

@use '../base/mixin' as*;

.header__wrapper {
  @include flex;
  padding: 30px 70px;

  .header__nav {
    margin-left: auto;
  }
}

このように「@use '../base/mixin' as*;」のように「as*」を付けることで
「mixin.」という記述が不要になります。

まとめ

Sassを導入してからコーディングが全然進みません。笑
本末転倒な気もしますが、慣れてくると「美しいコード」が書けるようになると思います。

（備忘録なんか書き始めたら余計に進まん・・）

まぁゆっくりマイペースに取り組んでいきます。

では、りょうた子でした。