フリーランスが会社員収入を継続して得られないパターン7つ

sass使うなら最低限これだけやっとけ

コーディングをするとき、企業によってはスタイルシートがsass指定のことがあります。

初めての方はcssのまま書いているとスタイルシートが反映されないので、混乱すると思います。

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

 

1.sassとは「sassはcssを効率的に記述したもの」

cssで書くと冗長になりやすい部分を、変数を使うなどして効率的に記述しています。

sassで書くことで、コード量を減らすことができコーディングのスピードが上がる、ミスが減りやすくなる(コーディング量が少ないため確認がしやすくなる)などのメリットがあります。

 

2.sass記述で最低限押さえとくべきポイント3つ

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

今回はscssファイルでの記述方法をまとめました。

これだけ押さえとけば、最低限scssファイルで記述したものを動かすことができます。

 

1.ファイル名「.scss」を使う

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

例:stylesheet.scss

 

2.ネスト

ネスト(階層構造)でスタイルシートを記述しましょう。

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

 

3.コンパイルする

.scssで記述したものを.cssに変えないと使えないため、コンパイルをすることでこれを行います。

1.ターミナルで目的のディレクトリまで移動する

ターミナル

2..scssを.cssファイルに変換する

ターミナル

エンターキーを押すと、cssファイルができています。

こちらのcssファイルをhtmlファイルに読み込ませて使いましょう。

 

クライアントへの提出は、scssとcssファイルの両方を提出します。