スゲぇと噂のスタイルシート！『Sass』をサクッとブラウザで試すところまでやる。
一度試すと病みつき！
普通のCSSの書き方には戻れないと噂のSass。もう試してみましたか？
Sassを試してみるには、なにやら面倒な下準備が必要だとも聞いてましたが、実はブラウザから簡単にトライできる方法があります。今回はその方法を簡単なサンプルと一緒に試してみます。
ウェブさえ
💬 𝕏（twitter）はよくフリーランスの人たちにフォローされてるようです。
Follow @websae2012
まずはサラッと。『Sass』って何？
Sassを直訳すると「構文的にすごいスタイルシート」です。「構文的に」というところをもっとくだいて言うと、「すごい書き方ができるスタイルシート」みたいな感じですかね。
とにかく、Sassはスタイルシートの記述や管理をもっとラクに楽しくしてくれる技術のことです。難しく考えずに、なによりまずは体験してみるが良し！ 今までのCSSではできない画期的な記述方法にビックリします！
でも、コンパイルとか必要＞＜
SassもCSSと同じくスタイルをファイルに記述していきます。でも、このSassの記述法をブラウザは理解してくれないので、CSSの既述法へと変換する作業が必要になります。この作業をコンパイルと呼びます。なんだか面倒くさそうですね。
実は、面倒くさそうなのはコンパイルだけではありません。コンパイルする前、パソコンにRubyとSassをインストールしておかなければならず…ああ本格的に面倒くさそうな気がしてきました。
Sassの魅力を知るには、なによりまず試してみるのが一番なのに、試す以前のハードル高し！ 「もう普通のCSSでいいかも。その方が慣れてるし。」とチャレンジ精神が萎えてしまうのは当然のことかもしれません。でも、ここで諦めてしまうのは本当に勿体ない！
ブラウザテスターがあるから
実は気の利いたツールがあります。「Sass Meister」です。ブラウザからすぐにSassの魅力を味わえます。
Sass Meisterの使い方
使い方は簡単です。数字は上のエリアを示してます。
- 1. Sassを入力。
- 2. リアルタイムにコンパイル。Sassの記述がCSSに変換され表示されます。
- 3. あわせてHTMLも入力しておくと、
- 4. プレビュー。ブラウザにおける表示具合も確認できます。
すぐれものです！ せっかくなので、いくつか簡単なサンプルでSassの記法を試してみましょう。Sassならではの効率的な書き方を体験できます。
1. ネスト
Sassを代表する記述法。ネストは入れ子の意味で、HTMLの階層に合わせてスタイルを入れ子、入れ子で書いていけます。
HTML
例えば、こんなHTMLのとき。
<div id="main"> <div class="entry"> <p></p> </div> </div>
CSS
CSSをこんなふうに書くことがあります。
#main {
border: 1px solid #ff0000;
}
#main .entry {
margin: 10px;
border: 1px solid #00a0e9;
}
#main .entry p {
background-color: #e97300;
}
同じID（#main）やクラス（.entry）を何度も繰り返し記述するのがダルい。もちろんコピペを使うけれど、それでもちょいと面倒。
Sass
Sassなら、HTMLの構造に合わせてこんなふうに記述できます。このまとまってる感が慣れるとたまらなくなってきます。
#main {
border: 1px solid #ff0000;
.entry {
margin: 10px;
border: 1px solid #00a0e9;
p {
background-color: #e97300;
}
}
}
コピペの回数を減らせるのはもちろん、HTMLの階層に沿っているので、HTMLの構造と照らし合わせやすく、スタイルシートの構成も把握しやすくなります。
修正や変更もラクです。IDひとつを変更しただけでも、普通ならコピペで増やした全てのIDに手を加えなければいけません。でも、Sassなら修正する箇所は極端に少なく済みます。
仮に上記の例で「.entry→#content」にする場合、Sassだと該当するのは一カ所だけ。一方CSSは、出現する「.entry」全部を見つけて書き直す必要があります。この例だと記述量が少ないのでインパクトに欠けますが、サイトの規模が大きくなるほど、Sassの効率的な記述法にシビれるはずです。
2. 参照
ネストと一緒に。「&」で親セレクタを参照できます。分かりやすいリンクの例をひとつ。
css
リンクのスタイルを定義。よくある書き方ですよね。
a {
color: #00a0e9;
}
a:hover {
color: #ff0000;
}
Sass
Sassなら「&」を使ってこんなふうに書けます。「&」は親セレクタの「a」を参照してます。
a {
color: #00a0e9;
&:hover {
color: #ff0000;
}
}
これだけだと「うーん、便利なの？」という感じですが、例えば、親の要素によって異なるスタイルを当てたいときなど便利さを実感します。
HTML
HTMLはこんな感じ。サイドバーに表示されるリンクです。
<div id="sidebar"> <a href="https://websae.net">ウェブさえ</a> </div>
Sass
こうして書くと、サイドバーに限ってリンクのホバーをオレンジ（#e97300）にできます。
a {
color: #00a0e9;
&:hover {
color: #ff0000;
}
#sidebar &:hover {
color: #e97300;
}
}
CSS
CSSで出力したらこう。
a {
color: #00a0e9;
}
a:hover {
color: #ff0000;
}
#sidebar a:hover {
color: #e97300;
}
3. 変数
変数もスゴく便利です。よく使う値に名前を付けられます。
css
繰り返し出てくる「#ff0000」という値に注目。
.box {
border: 1px solid #ff0000;
}
strong {
color: #ff0000;
}
p {
color: #ff0000;
}
Sass
「#ff0000」という値に「$color」という名前を付けました。書き方は「$変数名: 値;」です。値を呼び出したいところに「$変数名;」という形で記述すれば、その値を使えます。
$color: #ff0000;
.box {
border: 1px solid $color;
}
strong {
color: $color;
}
p {
color: $color;
}
共通の値を色々な場所で使いたいときに便利ですね。修正や変更もCSSなら該当する箇所全部を書き直す必要がありますが、Sassの場合は名付けた値だけを変えれば済みます。フォントや背景の色を一度に変えたいときなんかに役立ちます。
4. 演算
面倒な計算をしてくれます。「足し算（+）」「引き算（-）」「割り算（/）」「かけ算（*）」ができます。変わったのだと「余りを求める（%）」こともできます。
Sass
こんなふうに。変数と一緒に使ってみました。
$base: 16px;
h1 {
font-size: $base + 10px;
}
p {
font-size: $base;
}
.small {
font-size: $base - 3px;
}
基準のサイズを定めて、その大きさをもとにスタイルを定義したいときに便利です。上は「16px」を基準に「h1」「p」「.small」のフォントサイズを定義した例です。
5. 継承
同じスタイルを何度も繰り返し使いたいときに便利です。「@extend セレクタ;」と記述すれば、記述したセレクタのスタイルを呼び出せます。
Sass
「.box」のスタイルを使い回したいとき。「.entry」にも同じスタイルが当てられます。
.box {
background-color: #fff100;
border: 1px solid #e97300;
margin: 10px;
padding: 10px;
}
.entry {
@extend .box;
}
CSS
CSSで書くとこうなります。
.box, .entry {
border: 1px solid #e97300;
background-color: #fff100;
margin: 10px;
padding: 10px;
}
一つのスタイルをベースに、様々なパターンを作りたいときに便利です。次の例で見てみます。
Sass
「.box」のスタイルをベースに「.entry」のスタイルを定義してます。
.box {
border: 1px solid #e97300;
background-color: #fff100;
margin: 10px;
padding: 10px;
}
.entry {
@extend .box;
font-size: 20px;
}
CSS
CSSで出力するとこうなります。
.box, .entry {
border: 1px solid #e97300;
background-color: #fff100;
margin: 10px;
padding: 10px;
}
.entry {
font-size: 20px;
}
6. ミックスイン
「@mixin 名前;」で定義したスタイルを「@include 名前;」で呼び出せます。
Sass
シンプルな例を。
@mixin bg {
background-color: #ff00d8;
}
.box {
@include bg;
}
.menu {
@include bg;
}
CSS
CSSに出力するとこう。
.box {
background-color: #ff00d8;
}
.menu {
background-color: #ff00d8;
}
@extendと違って「@mixin 名前」は定義しているだけで、呼び出すまでは何も起こらないことが分かります。他に違うところは、「引数」が使えるところです。ミックスインならではのパワフルな機能です。
Sass
「@mixin 名前($引数)」の形で記述します。呼び出すところで引数に値を入れると、スタイルに反映されます。
@mixin bg($value) {
background-color: $value;
}
.box {
@include bg(#ff00d8);
}
.menu {
@include bg(#00a0e9);
}
CSS
CSSで出力すると「$value」にそれぞれ引数として与えた「#ff00d8」と「#00a0e9」が使われたことが分かります。
.box {
background-color: #ff00d8;
}
.menu {
background-color: #00a0e9;
}
以上！
簡単なサンプルばかりで記述量も少なく、Sassならではの強力な利点をイマイチ伝えきれなかったかも。Sass未経験者さんの試すきっかけになれば幸いだけど。
他にも、より高度なプログラミング言語に近い「条件分岐」や「繰り返し」の記述法、それに「関数」も備わってたりします。なにか別のプログラミング言語を触ったことがある人は、より素早くSassの魅力に馴染めるかと思います。ひとまず今回はこの辺で。
ほな、ごゆるりと〜。
読み終わったらシェア！
ウェブさえの無料サービス
どちらでもお好きな方を。もちろん両方でも。
