Web制作で速く稼ぐための勉強法

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コーディングで最低限勉強すること

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

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

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

ニャンニャン

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

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

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

例:stylesheet.scss

 

2.ネスト

Sassのネストとは

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

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

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

変更前CSS

変更後Sass

 

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

 

3.ファイルをコンパイルする

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

コンパイルって何?

コンパイルはSassファイルをCSSに変換するということです。

Sassで記述したものだけでは、画面に反映されないので行います。

ただし、この原理は難しかったら理解しなくてOKです。

 

コンパイルはVS codeのプラグインを使う

コンパイルはVS codeのプラグイン、Live Sass compilerをインストールすればOKです

VS codeはコードを書くエディタのことです。エディタには、sublimeとかbracketsとか色々あります。

VS codeは便利で人気のエディタなので、最初にsublimeを使っている人もVS codeにほとんどの人が乗り換えています。

プラグインはVS codeをカスタマイズ導入できる拡張機能です。

 

インストールする

VS codeを持っていない人はインストールをこちらからしましょう。

Live Sass compilerのインストールはこちらからできます。

すでにVS Codeがインストールされている方は、ボタンをクリックするだけでVS Codeで拡張機能をインストールするページが開きます。

Installボタンを押します

拡張機能の画面が開くので、Installをクリック

UninstallになっていればOK

 

.scssファイルを作成

自分で拡張子が.scssファイルを作成し、その中にSassを書いてきます。

フォルダから見るとこんな感じです。

 

 

Sassコンパイルを行うためにwatch Sass

1.VS Code下部にあるwatch sassをクリック

2.watchingという表記に変わればOK

Sassを書いたら保存→Successという表記に変わる

 

CSSファイルなどが作成される

そうすると自動的にCSSファイル、css.mapファイルが作成され、完了です。

ここまで最低限Sassのコンパイルをするまでの方法を紹介しました。

 

細かい設定は?

Live Sass compilerの細かい設定をしたい場合は、こちらの記事がわかりやすいです。