【 実証解説 】 独学で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
からです！！