このブログにしてからプログラム周りの記事を書きます！
私は普通にブログも書いていますが、
趣味でコーディングもちょこちょこ行なってますw
そんな中でCSSのコーディングは恥ずかしながら普通にしてきました。。。
コンテンツ量が多くなればなるほど、
めちゃくちゃ長くなって読みにくくなったり管理性や可読性が悪くなってしまうことも多々あります。。。
調べていくと色々な楽な方法がありますが、
今回はよく聞く「Sass(SASS/SCSS)」を学んでみようと思いました！
けどどこから始めればいいのかわからない。。。と始め自分も思いました。
今回基礎をどこで学んだのか、またローカル環境の構築などさらっと紹介して行きます！
Sassとは？
簡単に言うと「CSSを効率的かつ管理しやすくするための言語」かなと自分は思いました！
基礎部分を学んでからの印象ですが、
- 入れ子構造のため、親要素のセレクタを省略できる
- パーツなどのスタイルを使い回す(再利用)することができる
- スタイルを変数のように扱うことでき、また関数のように引数指定もできる
- 上記3点が可能なためコード量が減る
かなと思いました！
自分も調べるまでわからなかった部分がありました、
コンパイル(.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以外にも様々なプログラムを学習でき、
またスマホアプリ版もあるので家でも出先でも隙間時間で学習できるのでおすすめです！
今後北海道に関する記事も書きつつ、
このような開発系の記事も少しずつ紹介できていけたらなと思います！
ご指摘やアドバイスなどがあればコメントをどしどしお待ちしておりますのでよろしくお願いいたします！
コメント