フリーランスが営業なしで受注する方法5つ

sassコーディングの勉強/参考書は不要。最低限覚えることは3つだけ

コーディングをするとき、制作会社によくありがちなのが、スタイルをsassで書いて欲しいということです。

ゴロニャン

sassが必要って?css覚えたばっかなのに!つらい!

ゴロニャン

コーディングスピードめっちゃ遅くなりそう

ゴロニャン

progateのsass見ると覚えることありすぎ!そんな時間ないよ
sassはprogate全部しなくてOK。最低限ネストとコンパイルだけ出来ればOK

ニャンニャン

今回はsassで実装するための「最低限押さえとくべきポイント」だけをまとめました

sassコーディングの勉強/参考書は不要

sassコーディングって何?cssとの違いは?

sassコーディングとは、cssを効率化して書く方法です。

そもそもsassの書き方を知らなくとも、コーディングはcssでできるのですが、

ただ、制作会社ではsassでのスタイルシート記述が多いということを頭に入れておきましょう。

sassコーディングとcssとの違いは効率化

sassはcssで書くと冗長になりやすい部分を、変数を使うなどして効率的に記述しています。sassで書くことで、コード量を減らすことができコーディングのスピードが上がる、ミスが減りやすくなる(コーディング量が少ないため確認がしやすくなる)などのメリットがあります。

ゴロニャン

と言っても、css慣れてるのにsassで書くと最初はコーディングスピード遅くなるよw
sassの書き方に慣れたらコーディングスピードが速くなる!今は制作会社案件以外でも全部sassで書くよ

ニャンニャン

 

sassコーディングの勉強/参考書は不要

sassコーディングの方法は、勉強するまでもないし、参考書を買うまでもないです。

大事な部分は3つだけで、それを押さえればすぐ案件をこなせるレベルのsassが書けます。

 

sassコーディングの勉強/参考書は不要。最低限覚えることは3つだけ

sassの書き方で最低限抑えておくべきポイントは3つだけです。これだけ押さえとけば、最低限scssファイルで記述したものを動かすことができます。

制作会社案件をいくつかやってきましたが、私が行なった案件では、これ以上求められたことはあまりないです。

sassはprogate全部しなくてOK。ネストとコンパイルだけ出来れば良い

ニャンニャン

  1. ファイル名「.scss」を使う
  2. ネスト
  3. コンパイルする

1.sassコーディングの勉強:ファイル名「.scss」を使う

ファイル名は末尾に「.scss」とつけたものを使います。

例:stylesheet.scss

 

2.sassコーディングの勉強:ネスト

sassのネスト(階層構造)とは

sassのネスト(階層構造)とは、全体を囲んでいる要素のclassの中に、囲まれているclassを書くということです。

sassのスタイルシートの書き方の例

例えば、ネストを使うと以下のように省略して記述できます。

 

sassのコピペシートも参考にできます。

 

3.sassコーディングの勉強3.ファイルをコンパイルする

最後にコンパイルをします。

これは、sassで記述したものだけでは、画面に反映されないため、sassファイルをcssに変換するということですが、難しかったら理解しなくてOKです。

コンパイルはコアラというアプリを使えば一発です。

コアラの使い方はググればすぐ出てくるのでここでは割愛しますが、以下の記事が参考になるかもです。

【sass/js】無料のGUIコンパイラーKoalaでコーディングを楽にしよう!