【超初心者向け】Sassとは何？とりあえずこれだけ知っておきたい基本と使い方

「Sassってよく聞くけど何？」「SCSSとかSASSの違いは？」など、Sassについて始めてみたいけど何も分からないという人向けに、これだけ抑えておくべき基本と使い方をまとめました。

Sassって何？

Sassとは「Syntactically Awesome StyleSheet」の略＝「文法的にスゴイCSS」。CSSで更に便利に分かりやすい書き方ができるようにしたもので、2006年に登場しました。

例えば、以下のようなCSSをSassで書き直すとこうなります。

【CSS】

.navi{
　　　background:#eee;
}
.navi a{
      display:block;
}
.navi:hover{
      opacity:0.8;
}

【Sass】

.navi{
　　background:#eee;

　　　a{
      　　display:block;
　　　}
　　　&:hover{
          opacity:0.8;
　　　}
}

かなりスッキリして構造が分かりやすくなりました。単純にコードを書く量も減ったので作業スピードもあがるはず。

Sassのメリットとデメリット

Sassのメリット

・作業効率が上がる

Sassではネスト（入れ子）構造で書くことでコードを書く量自体が減ります。また、一度定義したスタイルをあとから呼び出したりといったことも簡単に出来るので余計な手間が無くなります。

・メンテナンスが容易になり運用効率が上がる

変数はCSSにもありますが、より単純な書き方で書けるようになり、カラーの変更などがあった場合にも変数を書き換えれば、その変数を使っている箇所全ての修正が一度に済みます。

Sassのデメリット

・環境を準備するのがめんどくさくて導入のハードルが少し高い

SassはCSSのようにそのままアップできる訳ではなく、「コンパイル」というCSSに変換する作業が必要となります。特にWindowsの場合はコンパイラを新たにインストールしなければいけないため、最初に少し面倒と感じる人もいるかと思います。

Sassでできること

１．ネスト（入れ子）構造で書ける

上記の例で挙げたように、親要素の中に子要素を入れ込むことができるので、親要素のセレクタを書くのが１回で済んだり、何よりぱっと見で構造が整えられて分かりやすくなります。

【隣接セレクタや子セレクタ】

隣接セレクタや子セレクタもCSSと同様に使えます

.main{
  width:1000px;
  > p{
     font-size:1.2em;
  }
  + h2{
     color:#333;
  }
}

【メディアクエリ】

メディアクエリもネスト構造に入れられます。

.main{
  width:1000px;
  @media screen and (max-width:767px){
      width:100%;
  }
}

「このクラスのスマホ用スタイルどこ行った？！」と上へ下へ探し回ることもなくなりそうです。

２．変数・四則演算がCSSより便利で見やすい

変数はCSSでも使えますが、Sassの方がシンプルで見やすいです。

【CSSの変数】

:root{
   --main-color: blue;
}
h1{
   color: var(--main-color);
}

【Sassの変数】

$main-color: blue;
h1{
   color: $main-color;
}

四則演算も、Sassでは変数と組み合わせて使うことができます。

【CSSの四則演算】

width: calc(100% - 80px);

【Sassの四則演算】

width: 100% - 80px;
$width : 1000px;
.main{
    width:$width - 80px;
}

３．ファイルを分割できる

サイトが複雑になるにつれCSSも膨大な量になってきますが、Sassはファイルを分割しインポートすることができます。例えば変数だけを記述したファイルやメニューバーなどパーツごとにまとめたりと分割することでコードも読みやすくなります。

４．JavaScriptのように関数が使える

Sassには元々準備されている「組み込み関数」と自分で作る「自作関数」があり、使いこなすとJavascriptと同じような動きも作成することができます。

Sassの記法：SCSSとSASS

Sassの記法にはSCSSとSASSがあり、それぞれ拡張子が「.scss」「.sass」と異なります。書き方も少しだけ違いがあり、SCSSは今まで紹介してきたような、カッコを使う書き方です。

SASSの書き方

.main
   .h1
       color:red

カッコが無い分、表記は楽ですが、見慣れない感じでちょっと落ち着かないですね・・。初めにSASSが作られましたが、SASSはCSSとの互換性があまり良くなかったのでSCSSが生まれました。現在の主流はSCSSなので、ネットなどで解説で使われているのはSCSSの方が多いようです。

Sassの使い方

早速Sassを使ってみるには、どうすればよいでしょう？まずは環境を構築する必要があります。

１．Rubyをインストールする

Windowsの場合はまずRubyをインストールします。Macは標準でRubyがインストールされているので、この作業は不要です。

Ruby

２．Saasをインストールする

Windowsシステムツールの中にあるコマンドプロンプトを起動してSassをインストールします。

３．コンパイラをインストールする

コンパイルは、コマンドプロンプトで直接コマンド操作でも変換できますが、初心者はコンパイラを使った方が作業しやすいと思います。ブラウザにSassを認識させるために必要な「コンパイル」をするためのコンパイラをインストールします。

【代表的なコンパイラ】

koala
Prepros

ワードプレスの場合はプラグイン「SCSS-Library」インストール

ワードプレスでサイトを制作する場合は、「SCSS-Library」というプラグインをインストールすればSCSSが使えるようになります。

Sassの勉強法

Sassを習得する方法についてまとめました。前提としてCSSの知識があることが必要となるかと思います。

１．オンラインで学ぶ

個人的には実際の画面を見て手を動かしながら学べるオンラインが一番おすすめです。特にCSSを既に習得している人はオンラインでの学習で十分かなと思います。

Progate

スライドで解説した後、自分でコードを書いて学ぶという学習法でかなり分かりやすく習得することができると思います。
また1,078円／月とかなりお手頃な価格で学ぶことができます。

２．本で学ぶ

基本から実践的なことまで、１冊にまとまっているので分からない点などを見直しやすいのが本の魅力ですね。1冊持っていてもよいと思います。

Web制作者のためのSassの教科書改訂2版 Webデザインの現場で必須のCSSプリプロセッサ [ 平澤隆 ] 価格：2640円（税込、送料無料) (2021/8/14時点) 楽天で購入