noteで小説、漫画、掲載してます!

ぴぃこのnoteはコチラ

SASSってなに?デザイナーも知っててよかったSCSSの世界

Web・プログラミング

自分のポートフォリオサイトをボロカスに言われてからと言うもの、負けるな精神でコーディングを頑張っております。

そんな私がヘボいWeb会社を退職して以来、独学で学んで一番に衝撃を受けたもの。それがSASSです。

せっかくなので、SASSについての学習記録をつけて、自分の記憶にも定着させていきたいです。

スポンサーリンク

SASSとは?

公式サイト

Sass: Syntactically Awesome Style Sheets
Syntatically Awesome Style Sheets

SASSというのはCSSプリプロセッサ(メタ言語ともいう)です。

簡単に言ってしまうとCSSをより効率よく記述するためのお助け装置。簡単に言いすぎてプロのフロントエンドエンジニアに怒られそうですが。

Webサイト作りに不可欠なCSS。しかしその特性からコードが崩れやすく、後々の管理が大変と言われている言語でした。そんな欠点を解消するために開発されたのがSASSです。

SASSの意味としても

Syntactically Awesome StyleSheets

直訳で「構文的にイケてるスタイルシート」というくらいなのでCSSをイケてるものにしてくれることは間違いなしです。

学び方

便利なSASSですが、普通のCSSとは違う「ルールのネスト」など、少し変わった書き方をします。しかもテキストエディタさえあれば始められるものでもないので、お勉強が必要です!

サイトで学ぶ

まずサイトで学ぶなら、王道のドットインストール。こちらは環境構築から自分でやる必要があります。

Sass/SCSS入門 (全15回)
CSSを効率的に書くための記法であるSass/SCSSについて学んでいきます。

環境構築めんどくさい!というなら、まずはProgateで書き方だけにでも触れてみましょう。まずは知ることから!

Progate(プロゲート) | Learn to code, learn to be creative.
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。

本で学ぶならコレ!

しかし、私はがっつりほんで学ぶ派でした。環境構築まで学ぶなら、本で学ぶ方が断然いいです。そんな私がSASSバイブルとしているのがこちら

SASSの決定版、SASS勉強するならこの本しかない!と自信を持って言えます。

SASSを学んでよかったこと

コードがスマート

コードが短くスマートになった!

これに尽きますね!後から見直して修正しやすく、普通のCSSの時より煩雑さを感じなくなりました。覚えるまで時間がかかりますが、その分作業めんでストレスが少なくなります。

否が応でもスキルアップ

SASSを導入しようとするとターミナル(黒い画面でコマンド打つやつ)を駆使して環境構築をする必要があります*。

私もそうなのですが、Webデザイナーになりたい!と言う人はデザインをメインにしたい人が多いです。でも、就職活動のためのポートフォリオ作りに当たっては、コーディングをしなければいけないのは厳然たる事実

コーディング頑張って否が応でもスキルアップしておくのはプラスだと思います。

*環境構築とは言っても、CSSはクライアントサイド言語なので、PHPのようにサーバーは必要ないのでそこは安心してください。

SASSの便利サイト

最後に、普通のCSSをSASSに変換してくれる、便利すぎるサイトも紹介しておきます。変換したいCSSをコピペするだけ。自分の書いたコードの答え合わせにも使えます。

css2sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code
CSS2Sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code

コメント