sassコーディングの勉強で参考書は不要。最低限知っておくべきこと

コーディングをするとき、当たり前となっているのがcssをsassで書くということです。

ゴロニャン

sassが必要って？CSS覚えたばっかなのに！つらい！

ゴロニャン

Progateのsass見ると覚えることありすぎ！そんな時間ないよ

Sassは最低限できるようになるレベルなら、参考書とか買わなくてOK。今回の記事の内容で最低限やってみよう。

ニャンニャン

今回はSassで実装するための「最低限やること」をまとめました。

Sassコーディングの勉強に参考書は不要

Sassコーディングって何？CSSとの違いは？

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

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

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

SassコーディングとCSSとの違いは効率化

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

ゴロニャン

と言っても、CSS慣れてるのにSassで書くと最初はコーディングスピード遅くなるw

Sassの書き方に慣れたらコーディングスピードが速くなる！今は制作会社案件以外でも全部Sassで書くよ

ニャンニャン

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

sassコーディングの方法は、まず最低限できるようになるのであれば、時間をかけて勉強するまでもなく、参考書を買うまでもないです。

今回の記事で紹介する内容をおさえれば最低限案件をこなせるレベルのSassが書けます。

sassコーディングで最低限勉強すること

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

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

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

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

例：stylesheet.scss

2.ネスト

sassのネストとは

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

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

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

変更前CSS

.main{
}

.main ul{
}

.main ul li{
}

変更後Sass

.main{

    ul{

        li{
          }

       }
      }

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

✔️Sassコピペシート

制作会社から受注するWeb制作案件では、Sass(CSSを簡略化して表記する方法)を使うことが多いです

このシートでは左がSass、右がCSS表記なので分かりやすいはず💡https://t.co/TJxpHCgfjD pic.twitter.com/c7vjIOggxX

— ふる (@guutenx) 2018年11月9日