Sassの概要・SassからCSSに変換する #CSS

はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・ Sassの概要や特徴、メリットについて
・ SassからCSSに変換する方法

概要

・ Sass

CSSの拡張言語で、CSSをより効率的に書くことができ、変数を扱ったり計算を行うことができます。
Sassのロゴを書いてみました。分かる方にはとても馴染み深いと思います（？）

Sassファイルの特徴

・ Sassは通常のCSSファイルに記述することはできず、反対にSassファイルにCSSを記述することができます。

・ Sassファイルを扱う拡張子は.sassと.scssの2つがあり、記法がそれぞれ異なります。

・ Sass記法

Sassファイルでは最初に作られた記法で、波括弧やセミコロンが不要ですが、プロパティの前に半角スペースが必要で、汚いコードになりにくいのが特徴です。また、後述するmixinの書き方がScss記法と大きく異なります。
CSSとの書き方に差があり、あまり普及されなかったそうです。

.container p
  color: #333
  font-size: 2rem
  padding: 3rem
  small
    color: #000
    font-size: .875rem

・ Scss記法

.sassの後に作られたのが.scssです。こちらはCSSに良く似た記法でSassの機能が使うことができ、今ではこちらの書き方が主流のようです。

.container p {
  color: #333;
  font-size: 2rem;
  padding: 3rem;
  small {
    color: #000;
    font-size: .875rem;
  }
}

Sassファイルを使うメリット

Sassを使うメリットとして、次の3点が挙げられます。

・記述の簡略化ができる

・プログラムのような処理ができる

・同じ値を使い回すことができる

・記述の簡略化

CSSでは親の要素から対象要素までのセレクタを何度も記述する必要がありますが、Sassではネスト（入れ子構造）することで、同じ親のセレクタをまとめることができ、親子関係が分かりやすくなり、親要素を複数回記述しなくてもよくなります。

index.html

<div class="block">
  <h1 class="title">Hello world!!</h1>
  <p class="text">Sass is <span>Smokin' Sexy Style!!</span></p>
</div>

■ CSSの例

style.css

.block {
  background-color: #000;
}

.block .title {
  color: #FFF;
  font-size: 70px;
  text-align: center;
}

.block .text {
  font-size: 15px;
  color: #FFF;
}

.block .text span {
  color: red;
  font-size: 20px;
}

.block .text span:hover {
  opacity: .8;
}

■ Sassの例

style.scss

.block {
   background-color: #000;
  .title {
    color: #FFF;
    font-size: 70px;
    text-align: center;
  }
  .text {
    font-size: 15px;
    color: #FFF;
    span {
      color: red;
      font-size: 20px;
      &:hover {
        opacity: .8; // 疑似要素は、&をつけることでネストできます（CSSを見て分かる通り、.block、.text、spanの全てを継承している）
    }
  }
}

・プログラムのような処理ができる & 同じ値を使い回すことができる

変数

Sassでは変数や条件分岐などのプログラムの処理を記述することができます。
例えば、よく使うピクセル数やカラーコードなどを変数として定義しておくことで、変数名で何度も使うことができ、記述量が減ってコードが見やすくなります。
変数を定義して呼び出すには、呼び出す場所よりも上に$変数名: 値;のように記述します。

$h2: 25px;

block {
  font-size: $h2;
}

配列

配列に値を書いて横に増えていった時、Scss記法では下に改行できますが、Sass記法では下に改行することができません。

$colors: red
         blue
         green;

$colors: red blue green

mixin

まとまったスタイルを定義する機能です。変数は値を定義しますが、mixinはスタイルを定義するものです。
mixinを利用することで、何度も同じスタイルを記述する必要がなくなります。
Sass記法では、定義する時は=変数名、呼び出す時は+変数名と記述します。
Scss記法では、定義する時は@mixin mixin名 (){}、呼び出す時は@includeと記述します。

■ Sass記法の例

=test
  color: #000
  font-size: 18px

p
  padding: 10px
  +test

■ Scss記法の例

@mixin template {
  content: '';
  display: block;
  clear: both;
}

.menu {
  @include template;
}

SassからCSSに変換する方法

方法は2つありまして、プラグインを使うか、Webサービスを使う方法です。

・方法① Visual Studio Codeのプラグイン『easy sass』を使う

.Sassファイルを作成して、ファイルに記述します。

style.scss

.test {
  padding: 1rem 0;
  background: #eee;
  a {
    color: #aaa;
  }
}

Visual Studio Codeの左ツールバーの一番下の四角いマークをクリックし、検索欄にeasy sassと入力します。

インストールをクリックします。

※ Sassがインストールされていないと、.sassファイルで記述しても文字の色が変わりませんので、その場合は検索窓でSassと入力し、Sassをインストールして下さい。
~~Sassのロゴはs79ns画伯が書いたものが上にあるので、参考にして下さい。~~

easy sassがインストールされている状態で、先程記述したstyle.scssを保存すると、style.scssの内容がそのままcssファイルとして自動作成されます。
style.min.cssは、style.scssの内容が1行になっており、改行やスペースを省くことで、ファイルサイズが圧縮されています。こちらのファイルを使うことで、Webサイトの読み込みの高速化を図ることができます。
従って、どの様にコンパイルされているかの検証用としてはstyle.cssを、本番環境用のファイルはstyle.min.cssを使い、ファイルの使い分けをするのが望ましいと思います。

・方法 ② Webサービス『SassMeister』を利用する

少しだけSassの機能を確認したい時に便利で、SassMeisterはWebでSassファイルをコンパイルしてくれます。

また、上のメニューバーの『Sass』→『Sass』をクリックすると、.scssから.sassの記述に変換も行ってくれます。

左側が.sassの記述に変換されました。

Sassの概要・SassからCSSに変換する