Sassの記法と種類について

はじめに

こんにちは、フロントエンドチームのta_kameです。
私がSassを使い始めた頃、Sassに種類があるなんてことは全く知らず、その上多くの人に使われているはずのLibSassが非推奨になるなんて思ってもみませんでした。私自身知らずのうちに使っていて、結構最近になってからDart Sassを覚えたのですが、今回はそのことについてまとめてみようと思います。同様にLibSassを扱っている方も含めて、今回はSassについて知っている人も知らない人も、少しでも参考になれば幸いです。

目次

Sassとは

Sassとは（Syntactically Awesome Stylesheets）の略でCSSのメタ言語です。 メタ言語とは、言語に対して特定のルールを加えることで具体的な応用として利用可能なものにした言語のことを指します。簡単に言うと「CSSにルールを追加して便利なものにした」言語がSassです。実際に使う時は、Sassのファイルをコンパイル（変換）したCSSファイルを、HTMLファイルから読み込むようにします。

CSSとの互換性について

SassとCSSは互換性があります。互換性があるとはどういう意味かというと、CSSの記述をSassのファイルにそのまま書いても動作が保証されていることを指します。例えば今CSSファイルが手元にあったとして、そのコードをコピーしてSassのファイルにペーストしても問題ないということになります。このことからSsssの導入ハードルは非常に低いと言えます。 Sassには多くの機能が実装されていますが、もしも現在のプロダクトにSassを導入したいと考えた場合、全ての機能を使いこなすことができなくとも、変数、関数、継承など、好きな機能だけを追加するといった形で、Sassの機能を小規模から利用することができます。

Sassの記法について

Sassには2種類の記法があります。しかし現在ではSCSS記法が主流となっています。「Sass（サス）だけど、記法についてはSASS（サス）ではなくSCSS（エスシーエスエス）」と少々混乱しそうですが、何はともあれ記法の違いを説明しておきます。

SCSS記法

ファイルの拡張子は.scssです。HTMLのようなツリー構造をCSSでも使えるようにしたのがSCSS記法です。

SCSS

div {
    background: #eee;
    p {
        background:#fff;
    }
}

CSS

div {
  background: #eee;
}

div p {
  background: #fff;
}

SASS記法

ファイルの拡張子は.sassです。{}や;を記述しないことでコーディング速度が上がり、便利そう…と思いきや、CSSとの互換性がないこと等の理由からSASS記法は浸透しませんでした。

SASS

div
    background: #eee
    p
        background:#fff

CSS

div {
  background: #eee;
}

div p {
  background: #fff;
}

Sassの種類

再度わかりにくくなってしまうのですが、Sassには実装している言語によって３つに分かれます。しかしながら公式が推奨しているのはDart Sassですので、今後新規で扱う場合や、また現在LibSassを扱っている場合もDart Sassについて知っておいた方がよいかもしれません。

Ruby Sass

Rubyで開発された最初に実装されたSassです。2019年3月26日にサポートが終了しました。

LibSass

C/C++で開発されたSassです。Node.js向けのnode-sassとして現在最も使われているライブラリです。しかし、開発において次第にDart Sassに遅れを取っていき、現在では非推奨となっています。

Dart Sass

Dartで開発された現在公式が推奨しているSassです。新しい機能はLibSassより先にDart Sassに実装されます。

LibSassとDart Sassの違い

前述した通り、LibSassは非推奨となっています。それでは実際にLibSassとDart Sassで何が違うのか…主な項目として@useと@forwardがあげられます。

@import廃止

@useと@forwadの説明の前に@importについて説明します。Sassにおいて最初に実装された機能の一つである@importですが、インポートされている変数や関数の定義が最初にどこで定義されているのか、場所を特定するのが難しい、CSSの@importと重複し意図しない副作用が発生してしまうなど、@importによる問題を何年も前から開発は認識しており、それは先にあげたような多くの問題を引き起こしていました。そのため@importは廃止されることが予定されています。

@use

Dart Sassでは@importの代わりに@useを使用することになります。しかしながら@importを@useに単純に書き換えるだけではありません。

LibSass

@import "./variables”;
p {
  color:$color-txt;
}

Dart Sass

@use "./variables”;
p {
  color:variables.$color-txt;
}

@useに置き換えた場合、名前空間が発生するため、variables.$color-txtと記述しなければなりません。名前空間はas説によって変更することができます。

@use "./variables” as var;
p {
  color:var.$color-txt;
}

as *と記述すると、LibSassの書き方に近い形で記述ができます。しかし、ファイル内で名前が重複するとエラーになるので注意して下さい。

@use "./variables” as *;
p {
  color:$color-txt;
}

また、例えばstyle.scssで下記のように全てのscssファイルを読み込んで使用していた場合も注意が必要です。

style.scss

@import "variables”
@import "mixin”
@import "base”
@import "layout”
@import "component”
@import "utility”

上記の例でいうと、LibSassではvariablesやmixinで定義した変数や関数をその後のcomponentで使うことができましたが、Dart Sassではできないので、全てのファイルで@useする必要があります。

@forward

似たような理由で、次のパターンもエラーとなります。

×　 ファイルAで変数を定義
　> ファイルBでファイルAを@use
　> ファイルCでファイルBを@useしてファイルAの変数を使う

LibSassでは下記の書き方で問題ありませんでした。

variables.scss

$primary-color: #f28828;

base.scss

@import "variables"

page.scss

@import "base"

p {
  color:$primary-color;
}

Dart Sassでは下記のように@forwardしたsassファイルを@useすることで利用できるようになります。

variables.scss

$primary-color: #f28828;

base.scss

@forward "variables”

page.scss

@use "base"

p {
  color:base.$primary-color;
}

おわりに

今回はSassについての紹介や、Dart Sassへの移行のポイントについて紹介しました。 紹介した内容以外でもwith節やshow節、map-getの書き方についてなど、他にも機能や注意すべき点があるので、興味のある方は調べてみて下さい。

参考

Sass: The Module System is Launched

Sassを@importから@useに置き換えるための手引き | Web Design KOJIKA17

Sassのモジュールシステムを@importから@useに移行する方法を考えてみた | Rriver

Sassの新しいモジュールシステム - シフトブレイン／スタンダードデザインユニット

Dart Sass、使ってる？Preprosを使えばコンパイルも楽勝！ | Webクリエイターボックス

---

• エンジニア中途採用サイト
  ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております！
  ご興味ありましたら是非ご確認をお願いします。
  
  https://career-recruit.rakus.co.jp/career_engineer/

• カジュアル面談お申込みフォーム
  どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
  以下フォームよりお申込みください。
  forms.gle

• イベント情報
  会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com