CSSプリプロセッサ

CSSプリプロセッサとは、CSSの記述を簡潔にし、メンテナンス性や拡張性を向上させるためのツールのことです。CSSプリプロセッサには、CSSにはないネスト（入れ子構造）などがあり、CSSの構文を拡張し、変数や関数、mixin（スタイルの再利用）などの機能を提供する他、より簡潔にわかりやすい構文にすることができます。

Googleが提供するウェブブラウザ Chromeは、2023年4月4日にリリースしたVersion 112.0.5615.50（Official Build）から、CSSプリプロセッサに正式サポートすることを発表しました。APPSWINGBY Developers Blogの記事はこちら

CSSプリプロセッサから見る背景

近年のウェブサイトでは、様々なニーズ・要件、多くのデバイスに対応する為に多くの技術が必要とされ、ソースコードが複雑化する傾向にあります。中小規模のウェブサイトでも、CSS設計をしっかりとおこない、メンテナンス（保守）やサービスリリース後の拡張を意識した設計をしなければならない時代になりました。

また、CSSは言語として未完全な部分が多く、構造が無駄に複雑、そしてコードが長く膨大な量になりがちといった特性があります。CSSプリプロセッサは、そんな不完全な言語であるCSSを補う役割としてリリースされました。

CSSプリプロセッサの種類

CSSプリプロセッサには、いつくつか種類がありますので、代表的なCSSプリプロセッサについてご紹介していきます。

Sass (Syntactically Awesome Style Sheets)

Sass（サス）は、Syntactically Awesome Style Sheetsの略で、より効率的にCSSを記述できるように機能拡張された言語です。Sassはすべてのバージョンのcssに互換性があり、いくつものフレームワークもリリースされていまので、とにかくコードを簡潔にしたい場合には、Sassがベストな選択肢となります。

Sass（サス）は、ブラウザで直接読み取ることができません。その為、Sass（サス）を利用する際には、SassをCSSにコンパイル（変換）する必要があります。WindowsやMacをお使いの場合は、Githubからスタンドアローンをダウンロードし、インストールする方法が便利です。

Sass公式ページ（外部リンク）に最新のリンクが張ってありますので、最新バージョンをダウンロードしてお使いください。

VS Codeをお使いの場合は、拡張機能追加メニューから「Live Sass Compiler」をインストールすることができます。

コンパイル

コンパイルは以下のコマンドを叩くだけで完了します。※hoge部分はファイル名に合わせて変更してください。

sass hoge.scss:hoge.css

Scss (Sassy CSS)

Scssは、cssとほぼ似たような構文でコーディングすることができる為、多くのエンジニアがScssを使用している言語です。以下はScssの一例ですが、Scssは、{ }を使用してネスト（入れ子構造）をつくり、&でつなげます。cssに多少触れたことがあるエンジニアであれば、直感的にScssのほうがわかりやすかもしれません。

.hoge {
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    &.hoge-hoge {
        color: #red;
        background: #black;
    }
}

Scssの機能

Scssは、変数を使うことができます。また、条件分岐、elseとelse ifの他、反復処理、関数等を使うことができます。

変数

$変数名: 値;

条件分岐

XXX {
  @if 条件A { スタイルA; } 
  @else if 条件B { スタイルB; } 
  @else { スタイルC; } 
}

Less (The Dynamic Stylesheet Language)

Lessは、CSSを拡張する為の”動的スタイルシート言語”です。LESS（Leaner Style SheetsあるいはLeaner CSS）と記述されている場合には、スタイルシート言語を意味し、Lessと記述されている場合には、ライブラリやコンパイルツールの意味として記述されます。Less.jsと記述されることもあります。

LESSの機能

変数

LESSもその他のCSSプリプロセッサと同様に変数を書くことができます。変数は、「@変数名: 値;」という形式で定義することができます。Scssを利用しているとうっかり間違えてしまうことがあるので注意が必要です。

@変数名: 値;

その他、簡単や演算や関数、（文字列の操作や数値演算、型のチェックなど）を使うことができます。

関連用語

コンパイル

ネスト

フレームワーク

まとめ

CSSプリプロセッサは、複雑化するウェブサービス開発において、ソースコードを簡略化させ、メンテナンス性だけではなく機能追加やリファクタリングの際にも非常に効果のあるツールです。

CSSプリプロセッサを上手に使いこなすことによって、ウェブサービスの成長性は格段に向上することでしょう。

開発者にとっても、ウェブサービスを運営するエンタープライズにもメリットあるのが、CSSプリプロセッサです。