コーディング備忘録 「Sass」編
どうもお久しぶりです、りょうた子です。
これまでは、
・フォトショップ
・イラストレータ
を使って、バナーやサムネイルなど「デザイン」をメインで作業していました。
ですが、最近
コーディング久々にやってみたいなぁ
という「飽き性」特有の症状が出てきたので、ここ数週間コーディングにどっぷり浸かっています。笑
コーディングは楽しいのですが、独学なのでエラーとの戦いの毎日です。
そんなエラーとの格闘を記録として残そう！
と思い、気が向いたら備忘録として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;
}
}@include flex; ではなく @include mixin.flex;
という、「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を導入してからコーディングが全然進みません。笑
本末転倒な気もしますが、慣れてくると「美しいコード」が書けるようになると思います。
（備忘録なんか書き始めたら余計に進まん・・）
まぁゆっくりマイペースに取り組んでいきます。
では、りょうた子でした。