意外と簡単！Sassを使ってページ制作
Sassを学ぼうと思ったきっかけ
現在、新しい会社での就業に向けて、コーディングのスキルを高めています。
以前、ショーへーさん（https://twitter.com/showheyohtaki）
のデイトラ（30DAYSトライアル）をやっていたのですが、途中で停滞していたので、その続きをやっています。
そのデイトラの中の、
5. 30DAYSトライアル【デザインデータからコーディング〜よく使うパターンを練習しよう】
コチラでSassが出てきたので、やる事にしました。
もちろん、事前にSassのメリット・デメリットを調べ、自分にとってプラスになると踏んだので始めました。
Sassとは？
簡単に言うと、CSSの拡張言語です。
CSSよりも短く、省略して書けるよ～って感じです。
例えば、
「うけたまわります」
より
「承ります」
の方が読みやすいし、文字数も少ないですよね？
けれど、意味は一緒。
そういう事です！（違う）
難しい話はいろんなサイトでもっと分かりやすく書いてあるのでそちらを参考にしてください笑
事前知識・レディネス
「読み方はサス？サース？」っていうレベルからのスタート。
ただ、CSSは一通り分かっていないと辛いと思います。
Progate【Sassコース】（有料）
まずはお世話になっているProgateでSassコースを勉強しました。
途中から有料になります。
ProgateではSassを自動でCSSに変換（コンパイル）してくれますので、考え方や書き方に集中して学べます。
途中、関数や引数も出てきましたが、JavaScriptを学んでいた私にとっては、わりと理解しやすいです。
ドットインストールはまだ早かった
次にドットインストールで学ぼうとしましたが、
Sassを自分のパソコンで使えるように、ローカル開発環境の話が最初に出てきて、「？？？」となってしまいました。
ドットインストールにはローカル開発環境の講座もあるのですが、それも途中で放棄していた私は、あえなく断念しました…。
待っていてくれローカル開発環境…！いつかやるからな！
VSCodeでSass環境構築
Sassについて調べると、ローカル環境開発を作らなくても、VSCodeの拡張機能で簡単にSassをcssにコンパイルできる事を知ります。
早速『easy sass』という拡張機能をインストール！
Sassで記述して保存すると、瞬時に同じディレクトリ内に、コンパイルされたcssファイルが作成されるという優れものです！
Autoprefixerを使っている人は注意！
試しにsassファイルでProgateで書いたコードをコピペして、いろいろイジっていた時に分かったことがあります。
それは、
Sassのファイル内では、拡張機能Autoprefixerを入れていると変な所にベンダープレフィックスが書かれてしまうという点です！
そのまま保存しようとしてもエラーになってしまいます。
そこだけ注意です！
修正したり、設定を変えたりすれば解決できると思いますが、私は面倒くさくなって、Autoprefixerを無効にしました笑
YouTube教材
次にやったのが、YouTube教材！
教材といってもSassを使って簡単なページを作ってみましょう的な動画です。
デイトラのBootstrapの所でもYouTubeの教材を使っていたので、もしや？と思って検索したら良さそうなのが出てきたので、すぐにやりました。
ミッション・インポッシブルのベンジー似のおじさんが教えてくれます。
途中、口が回らなかったり、タイプミスをしたりと、おっちょこちょいな感じでしたが、そこがまた憎めませんでした。笑
答え合わせができるよう、完成したsass、cssファイルもダウンロードできるようになっているところも親切で良いです。
Sassの書き方も、Progateで出てきた@mixinや@includeなども出てくるので、Progateの次にやるには最適の教材だと思います！
制作したページ
便利な『CSSクリップパスメーカー』
今回の背景のような、線が切れているようなCSSは正直、作成したことがなかったのですが、動画の中でCSSクリップパスメーカーというサイトを使っていて「そうやるんだ！」と勉強になりました。
図形を入力すると自動でコードを書いてくれるというめちゃくちゃ便利なシステムで、今後も使えそうだなと思いました。
課題
途中、sassファイルなのに、@functionや@returnなどが出てきた所だけ「ん？」となりました。
あと『map-get』というのもサラッと出てきたものの分からなかったので、勉強が必要です。
まとめ・振り返り
Sassを使うと、CSSの記述が楽！早い！というのを実感しました。
あとは何と言っても修正の時に楽だろうなと思いました。
CSSだけだと、キーワードを検索してちょこちょこ変えたりしましたが、Sassでは元の引数を変えるだけですからね。
これからはSassを使ってコーディングしていきます！
コメント