![見出し画像](https://assets.st-note.com/production/uploads/images/79224951/rectangle_large_type_2_6e03e3902e5b3283a1559f0b5d090438.jpeg?width=800)
【 実証解説 】 独学でWEB制作フリーランスになるまでの学習③ SCSS投資家のFIREへの旅路 ♯415
WEB制作フリーランスになるまでの学習の第三回です。
【 学習の流れ 】
学習の流れを紹介し、その具体的な学習方法を紹介します。
1. HTML・CSS
2. jQuery
3. JavaScript
4. SCSS
5. Photoshop・Illustrator
6. WordPress・PHP
7.XD
8. サーバー関連
このような流れで学習を進めました。
これは、1が終わったら、2というわけではありません。
1をやりながら、2を追加。
1、2をやりながら、3を追加。
1、2、3、をやりながら、4を追加・・・・。
という形になります。
今回は、
4. SCSS
を解説します。
4. SCSS
CSSをそのまま書いていくのも良いですが、
SCSSで書くと、メリットが多く、書き方もCSSを理解していればすぐ使えます。
・ メリット
1. ネスト(入れ子)を使える
2. 変数が使える
3. Mixinが使える
・ 必要な処理
CSSにコンパイル(変換)が必要
・ 書き方
例として、とあるヘッダーのコードはこんな風に書きます。
SCSS
header.header {
width: 100%;
.logo {
width: 100%;
img {
width: 100%;
}
}
}
このように、入れ子構造で書いていきます。
そして、これがコンパイルされると、↓
CSSにコンパイル後
header.header {
width: 100%;
}
header.header .logo {
width: 100%;
}
header.header .logo img {
width: 100%;
}
このように、自動的にCSSファイルが作られます。
結果的に、読み込ませるのはこのCSSです。
SCSSは書き方の違いになります。
▶︎ 詳しい使い方
こちらの記事に詳細に解説があります。
ご覧ください。
SCSSは必須
SCSSは、CSSをやっと理解したのに、また違う方法を覚えるのかと嫌になる方もいると思います。
しかし、その少しの手間が多大なリターンを生むことを約束します。
使えば使うほど、SCSSでよかった〜!
と、思うシーンが増えてきますから、使っていきましょう。
使ううちに、SCSSしか無理ってなりますから。
【 まとめ 】
今回は、SCSSの解説でした。
次回は、
5. Photoshop・Illustrator
からです!!
この記事が気に入ったらサポートをしてみませんか?