収入・働き方別プログラミング言語の選び方

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

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

ゴロニャン

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

ゴロニャン

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

ゴロニャン

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

ニャンニャン

 

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

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

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

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

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

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

ゴロニャン

と言っても、css慣れてるのにsassで書くと最初はコーディングスピード遅くなるよw
sassの書き方に慣れたらコーディングスピードが速くなる!今は制作会社案件以外でも全部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のスタイルシートの書き方の例

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

 

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

最後に、.scssで記述したものだけでは、画面に反映されないため、コンパイルをして.cssに変えます。

コンパイルはコアラというアプリを使えば一発です。コアラの使い方はググればすぐ出てくるのでここでは割愛します。

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

 

web制作の仕事の流れとコーディング手順【web制作会社案件編】