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

 

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

vs code下部にあるwatch sassをクリック

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

 

.scssファイルを作成

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

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

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

 

細かい設定は?

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