Sass初心者の私がまず始めにやったこと(基礎勉強〜ローカル環境構築)

このブログにしてからプログラム周りの記事を書きます！

私は普通にブログも書いていますが、
趣味でコーディングもちょこちょこ行なってますw

そんな中でCSSのコーディングは恥ずかしながら普通にしてきました。。。
コンテンツ量が多くなればなるほど、
めちゃくちゃ長くなって読みにくくなったり管理性や可読性が悪くなってしまうことも多々あります。。。

調べていくと色々な楽な方法がありますが、
今回はよく聞く「Sass(SASS/SCSS)」を学んでみようと思いました！

けどどこから始めればいいのかわからない。。。と始め自分も思いました。
今回基礎をどこで学んだのか、またローカル環境の構築などさらっと紹介して行きます！

Sassとは？

簡単に言うと「CSSを効率的かつ管理しやすくするための言語」かなと自分は思いました！

基礎部分を学んでからの印象ですが、

かなと思いました！

自分も調べるまでわからなかった部分がありました、
コンパイル(.sassで書いたコードをブラウザ側で認識できるように.cssに変換)することで使えます！
なのでスタイルシートの指定では.sassや.scssは不可能という感じですね。
(初歩的なことうだうだ書いてしまってすみません。。。)

普通にQiitaや開発者のブログなどを読んで進めるのも良いかなと思いましたが、
まだ目標物など決まっていなかったのでなかなか手が動かず。。

そんな中で「Progate」というオンライン学習サービスがありこちらを使って学んで見ました！

「Progate」は初心者向けのプログラミングを学べるサイトで、
始めに学習するセクションのスライドを読んで、その後ブラウザ上で実践という流れなので、
職場OJTを受けているようなそんな感覚で勉強ができます！

序盤のレッスンは無料で、後に行くと一部のレッスンのみが有料(980円/月)となっております！
今回のSassについては4つめ以降が有料だったはずです！

Progateでは波括弧を使うSCSSを採用しています。(インデントで組んで行くのがSASS)

ちなみに実際のレッスンはこのような画面です！

こちらが始めに学習する内容を説明してくれるスライドです！

出展：Progate

その後スライドの内容に沿って実践をする画面はこのような感じです！

出展：Progate

Sassは全部で15レッスンあり、変数や関数、スタイルをまとめることができる「@mixin」、外部ファイルを読み込む「@import」も学ぶことができます！

私は「node-sass」を導入しました！
サーバーサイドで動くJavaScriptのNode.jsで、
パッケージ管理のnpmコマンドで導入して行きました！

・Node.jsのインストール
手っ取り早く公式サイトからダウンロードしてインストールを行いました！
(コマンドでの導入は調べてみると出てきますw)
https://nodejs.org/ja/

インストールができたかどうかの確認は下記コマンドを打ちバージョンがこんな感じで出てくればOKです！

$node -v
v11.1.0

・node-sassのインストール
下記のコマンドでインストールが可能です、自分はグローバルインストール(-g)ですが、
調べてみるとローカルインストールの方が良いとの記事は色々ありますが今回はこちらで。。

$npm install -g node-sass
$node-sass -v
node-sass	4.13.0	(Wrapper)	[JavaScript]
libsass  	3.5.4	(Sass Compiler)	[C/C++]

・Sassファイルのコンパイル
scssファイルを作成し中にコードを記載、
その後実行することでcssファイルに書き出されます！

$ vi test.scss
$ node-sass test.scss style.css --output-style expanded
Rendering Complete, saving .css file... 
Wrote CSS to /○○○○/○○○○/style.css

expandedの部分が書き出し形式で、
expandedだと下記のように

button { 
    background: #FF0000; 
} 
button.blue { 
    background: #0000FF; 
}

compactだと下記のようになります！(他には「nested」「compressed」があります！)

button { background: #FF0000; } 
button.blue { background: #0000FF; }

今回はSassを紹介していきました！
実際にブログとして書き上げることで個人的にも学習したことを復習してアウトプットできるので、
知識として溜まっています！

今回紹介したProgateについては、Sass以外にも様々なプログラムを学習でき、
またスマホアプリ版もあるので家でも出先でも隙間時間で学習できるのでおすすめです！

今後北海道に関する記事も書きつつ、
このような開発系の記事も少しずつ紹介できていけたらなと思います！

ご指摘やアドバイスなどがあればコメントをどしどしお待ちしておりますのでよろしくお願いいたします！