東京都府中市、九段下のWEB制作会社Maromaroのブログです

2020.02.25

taka

SCSS(SASS)とCSSの違いについて

こんにちは。Maromaroのtakaです。
現在、あたり前のように使っているSCSSですが、
そういえばSCSS(SASS)とCSSの違いってなんだろうとふと考えたので記事にしました。

SCSS(SASS)とは?

簡単にいうと「CSSをより効率的に書ける言語」です。

Sass=Syntactically Awesome StyleSheet

  • Syntactically = 構文的に
  • Awesome =  驚くべき
  • StyleSheet = スタイルシート

こういった意味となっております。

SCSSはSASSの違いはざっくりですが、

SCSS=CSSと似た記述
SASS=Rubyと似た記述

といったような形になります。

SCSS

 
.test{
margin:10px;
    a{
     padding:10px 20px;
   }
}
 

SASS

.test{
    margin:10px
a
    color:#12cacc;
    padding:10px 20px;
}

上記のように若干書き方は違いますが、
実行結果は同じです。

SCSS(SASS)を導入するメリット

CSSコードが減る!

SCSS(SASS)を導入すると、CSSのコード量が減ります。
下記記述の入れ子や変数を使うことにより簡易化できます。

コードの保守管理がし易い!

SCSS(SASS)はネスト(入れ子)を使ってコードを書くことができます。
コード量も減りますし、視認性も高まります。コードの保守管理が格段にし易くなるでしょう。

バグが減らせる!

SCSS(SASS)を導入すると、バグ(不具合)を減らすことが期待できます。
コード量が減ることで、人為的なミスが減ることが主な理由です。

CSSにはない機能が使える!

SCSS(SASS)では、変数やMixinなど、CSSをもっと便利に使える機能が備わっています。

 

SCSS(SASS)はCSSにコンパイルする必要がある。

SCSS(SASS)はCSSをより書きやすくしたものなので、
SCSS(SASS)で書いたコードをCSSにコンパイル(変換する)必要があります。
CSSへのコンパイルには様々なソフトウェアを使用しますので、
使用環境にあったソフトを探してみるのも良いかもしれません。
ちなみに私はDreamweaverでコンパイルしています。

まとめ

SCSSが使えればコードの記述量も減り、時間短縮もでき、
管理もしやすくなるので、必須レベルと思われます。
コーディングは速さと正確さが命ですので、是非覚えていきたいですね。