【知識】Sassって何？

Tweet

Pocket

Sassって何？

Sassとは「Syntactically Awesome Stylesheets」の略語で、CSSに対して機能を拡張した言語のことです。

別の言い方をすると、CSSをプログラミングできるようにした言語とも言えるでしょう。一般的なプログラミング言語では変数を使用したり、関数を定義したりできますが、そういった機能をCSSでも使えるようにしたものがSassです。

Sassには大きく分けて2つの種類の書き方があります。SCSS記法とSASS記法です。

歴史的にはSASS記法のSassが先に登場しました。しかし、SASS記法のSassは通常のCSSとの互換性もなく、SASS記法独自の記述ルールが採用されていたため、あまり普及しませんでした。

そこで、通常のCSSとの互換性を持ったSCSS記法のSassが登場しました。SCSSとは「Sassy CSS」の略語で、日本語で訳すと「いけてるCSS」といった感じでしょうか。

現在、Sassと言えばSCSS記法のSassを指すことがほとんどです。この記事においても今後はSCSS記法のSassについて解説します。

そもそもCSSについてについて確認したい方は、以下のページをご覧ください。

【基本】CSS（カスケーディングスタイルシート）って何？

CSS（シーエスエス）とは、「カスケーディングスタイルシート」と呼ばれるもので、Webサイトのレイアウトやデザインなど「見た目」を操作・制御するための言語のことです。

wakaru-web.com

CSSからSassが使われるようになった理由

Webサイト制作の現場においてCSSは長い間使われてきました。しかし、CSSの記述は冗長で、特に大規模なWebサイトの制作においてはメンテナンスが大変という側面もありました。

このようなCSSの現状の一つとして、同じようなスタイルを使いまわしたい場合、元の場所からコピーして該当箇所に貼り付けるといった作業が必要なことがあげられます。さらにその箇所に変更があった場合、コピペした箇所も全て書き換えるといった作業が発生します。

このように通常のCSSの不便な点を解消するために、Sassが開発されました。先ほど取り上げた同じスタイルを使いまわしたい時、Sassでは変数を使う事で簡単に実装することができます。ここでSassの変数を使ったサンプルを紹介しましょう。

【SCSS】

$keycolor: #ff0022;
.box {
border:1px solid $keycolor;
}
.box p {
color:$keycolor;
}

このソースコードの1行目に記述された「$keycolor」がSassにおける変数です。

$keycolorには「#ff0022」というカラーコードのデータが保存されています。そして変数「$keycolor」は「.box」の境界色と「.box p」の文字色でも使われています。

このSCSSファイルをCSSファイルにコンパイル（機械語に翻訳）すると、以下のようなCSSファイルが生成されます。

【SCSS】

.box {
border: 1px solid #ff0022;
}
.box p {
color: #ff0022;
}

生成されたCSSファイルを見ると、スタイル指定に使用された「$keycolor」という変数が、「#ff0022」という値に展開されていることがわかります。

つまりSassファイルの1行目の「$keycolor」の値を変更するだけで、生成されるCSSファイルの「.box」や「.box p」で使われているスタイル指定をまとめて変更できます。このように変数を使ってスタイル指定を使いまわすことができるというのがSassの特徴の一つです。

1ページしかないWebサイトなら、わざわざSassを導入する必要はないかもしれません。

しかし、実際のWebサイト制作の現場では、数万ページから構成されるWebサイトを制作するようなケースもあります。このような大規模サイトで、効率良くCSSを記述できる手法の一つとしてSassが普及していきました。

Sassの機能

Sassには変数の機能だけでなく、他にも様々な機能があります。

• コードの再利用（ミックスイン・エクステンド）などが使える
• 関数を定義できる
• 複数のCSS（パーシャル）を一つにまとめることができる
• Sass専用のコメントが使える
• 親子関係のセレクタの記述を簡略化できる

Sassには豊富な機能があり、使いこなすにはかなりの経験と知識が必要です。

特にCSSに詳しくない人がいきなりSassを使おうとしても、Sassのメリットを享受しにくいかもしれません。これからSassを使おうと思っている方は、まず普通のCSSをそれなりに記述できるようになってから、Sassを導入した方がスムーズにいくでしょう。

SCSSファイルからCSSファイルを作る方法

SCSSを使う事で、CSSを便利に記述することができます。

ここで一つ注意しておきたい点として、Google ChromeやEdge、Firefoxといたブラウザソフトは、あくまでも、SCSSファイルから生成された通常のCSSファイルのみを解釈するという点です。

SCSSファイルを、そのままブラウザが解釈するわけではありません。

先ほど、サンプルでSCSSファイルからCSSファイルを生成するサンプルを紹介しました。このようにSCSSファイルからCSSファイルを生成することを「コンパイル」といいます。

プログラミング言語において、ソースコードから実行ファイルを作成する作業も、コンパイルと言います。

つまり、SCSSファイルを作ったら、必ずCSSファイルへとコンパイルする必要があるのです。ここは少しわかりにくい点だと思うので注意してください。

SCSSファイルからCSSファイルを生成するためのコンパイラはいくつかありますが、代表的なものを2つ紹介します。

Prepros

Preprosは、Windows上で動作するGUI（グラフィカルユーザインターフェース：コンピューターへ伝える命令や指示を、ユーザが画面で視覚的に捉えて行動を指示できるもの）のSassコンパイラです。Mac用やLinux用もあります。

PreprosではSassのコンパイルの他にも、以下のような豊富な機能を用意しています。

• Less、Stylusなどのコンパイル
• ファイルの変更に応じてライブリロード
• HTML/CSS/JavaScriptの圧縮
• FTP転送機能

UI（ユーザーインタフェース：ユーザーがPCとやり取りするときの、入力方法や表示方法等の仕組み）は英語ですが、日本でも普及しているコンパイラなので、調べながら使えばすぐに使いこなせるようになるでしょう。

また、Preprosは有料（29ドル）ですが、使用期限無制限で使う事もできます。ライセンスを購入しない場合、購入を促すポップアップウィンドウが頻繁に表示されますので、もし気に入ったらライセンスを購入すればよいでしょう。

Koala

Koalaも、Windows上で動作するSassのGUIコンパイラです。Sassの他に、LessやJavaScriptの圧縮にも対応しています。

管理画面では日本語を選択できますが、すべてのメニューが日本語になるわけではないので、注意が必要です。

Koalaは完全にフリーのソフトウェアですが、寄付を募集しています。もし使ってみて気に入ったら寄付をしてソフトウェアの開発に貢献するのも良いでしょう。

Tweet

Pocket