サクッと勉強してすぐにSASS,SCSSを使いこなせるようになろう!

2019.05.22|サイト構築

ホームページにおいて、HTMLは文書構造、
デザインやスタイリングはスタイルシートといったことは
昨今では常識!ということですが、
そのスタイルシート部分、をより高度に、簡単に作成できるのが
SASS,SCSSだと思います。

難しそう、と思っているあなた、
そんなに難しくないんですよ、仕組みを理解すれば!!!!!
CSSはもうSASS,SCSSでかこう!
便利すぎてもう、戻れませんよ!!

SASS,SCSSとは

こちらの記事でも力説していますが、

ほんとにね、便利なんです。

Sassとは、「Syntactically Awesome StyleSheet」の略で、

Syntactically = 構文的に
Awesome =  イケてる、すごい、やばい
StyleSheet = スタイルシート

です。

マジでって思ったけど、
どうやらマジのようです。

Sassは2種類の構文で構成されたスクリプト言語で、SASS記法とSCSS記法の違いがあります。

Sassってなに?だった私がSassの使い方を解説してみた

http://creator.dwango.co.jp/9668.html

ちなみに、
上記で引用したリンク先には、いろいろインストールしたり、
色々設定したりと書かれておりますが、
現在はドリームウィーバーでは標準でコンパイラが搭載されておりますし、

vscodeなんかのエディターも、ものによってはコンパイラをインストールして、使えたりしますので、
現在の環境ではだいぶ書きやすくなっております。

ですので、よりいっそ、CSSはもう、SASSかSCSSで書いた方が断然お得って感じがします。

サクッと勉強したい人におすすめなサイト

Progateだから楽しめる
初心者からできる
プログラミング学習

Progate
https://prog-8.com/

こちらはオンラインで、SASSだけでなく様々なプログラミングの勉強ができます。
無料版と有料版があり、
無料では導入部分の学習ができます。

Sass
‐CSSをより便利に効果的に 操作する言語

https://prog-8.com/languages/sass

こちらのページからSASSの基本をレッスンすることができます。

ただ、こちらは最後まで学習したい場合は、
有料版の登録が必要となります。

が、有料版も月額980円と大変お得です。

わかりやすい内容ですし、繰り返し学習もできますので、
おすすめです!

Sassコース & トレーニング

https://jp.linkedin.com/learning/topics/sass

また、このようなオンラインコースも検索すれば多々出てきますので、
予算と自分に合った方法でサクッと勉強してみてはいかがでしょうか?

SASS,SCSSコンパイルできるエディタも多数!

導入に向けて、
現在は別途コンパイラをインストールしなくとも、
コンパイラが搭載されているエディターが多々あります。

これは本当に使いやすくなりますよね。
試してみるハードルも下がっている感じがします。

Sass/SCSSコンパイルできるエディタ

https://dskd.jp/archives/90.html
  • Sublime Text
  • Atom
  • Coda 2
  • Vim
  • VSCode
  • WebStorm
  • Bracket
  • Dreamweaver

などなど、結構有名どころはほぼ、搭載しているのではないでしょうか?

引用先の記事内では、どのような使用になっているか、コンパイラの種類など細かに書いてありますので、そちらを参照してみてください。

逆コンパイルしてくれるサイトもある!

使い始めてめっちゃ便利になったけど、
今まで書いてたCSSもSASSやSCSSにしたいなぁ…
なんて思っているあなたに朗報。

あるんでよ、逆コンパイルしてくれるサイト様が!!!!!

これは便利!すぐに使える、CSSをSASS/SCSSに簡単に変換できるツール

https://y-com.info/contents/?p=4630

意外に便利!CSSを SASS / SCSSに変換するコンバーター

https://devnote.work/web-creation/css/60/

ほんとにここまで、おぜん立てされれば、
もう、「知らない」だけで使わない理由はなくないですか?

CSSがわかればSASS,SCSSの理解はすぐできる!

勉強なんて、とか、
難しそう、とか
思うところはたくさんあると思いますが、
CSSが理解できていれば、SASS,SCSSの理解はすぐと思います。

覚えれば、本当にスタイルシートの作成がより早く、よりスムーズになります。

作業効率もアップしていいことづくめ!

これを機に、
サクッと勉強してサクッと使えるようになって、
現場でどんどん使っていって、作業効率アップめざしましょ!!!