今さら聞けないSassの基礎知識

今さら聞けないSassの基礎知識

1.最初に結論:Sassとは?

CSS の、コーディング効率やソースコードの保守性を向上させる技術が、Sass です。ちなみに、正確にはメタ言語っていいます。

2.CSSって何?

簡単にかいつまんで説明しておきますと・・・。

CSSとは、HP(ホームページ)やサイトを表示する時、そのデザインを指令するソースコードのことです。

フォントの大きさとか、フォントの色とか、全体のデザインなどを指定することができます。

HTMLはHPやサイトの構造を記述するコード(と言うよりタグ)です。CSSは必ずHTMLとセットで使うことになります。

 

↑のソースコードは、ごくごくシンプルなCSSのコードです。このソースコードが何を指定しているかを解説します。

上記のソースコードを日本語にすると、「p要素(p『段落』タグ)内の、文字色を、赤にする」となります。

CSS の構文は、こんな風にとてもシンプルです。 上の例にあるように「どこ(例:p要素)の・なに(例:色)を・どう(例:赤に)する」を繰り返して作業を進めていきます。

それはCREATOR'S HIVEのHPも、他の多くのサイトも同じです。

このようにシンプルなソースコードを数多く積み上げていくのが、CSSなのです。

「もっと詳しく知りたい」という方は、こちらを見て貰うのが良いです。

ch_eyecatch_starttoCSSいまさら聞けない「CSS」超入門
はじめてのCSSCSSとは、HTMLなどのWEBページを制作する上で文字のスタイルやフォント、文字の大きさを表現する定義をまとめたものと言え...

3.CSSの問題点

先に説明したように、CSSの記述はシンプルで、初心者にも取り組みやすいなどのメリットがあります。

でも現在、ウェブサイトのデザインは、複雑になってきています。それは今後も変わらないでしょう。

そうなると、ソースコードは肥大化し、プログラマの負担は増える一方になり、保守性も低下することになります。

CSSの良いところは簡単かつ明確な点ですが、簡単ゆえにあまり複雑なことができません。 JavaScriptなどのプログラミング言語なら、変数とか演算を使って柔軟な命令ができますが、CSSにはそれができません。

そこで、CSSをもうちょっと便利にしようぜ!という発想からSassが生まれたのです。

4.CSSの問題点を解決する、Sassのメリット

SassはCSSをプログラムっぽく書くことで、CSSの様々な不満を解決できるのです。 「CSS の不満を、Sass ではどのように解決できるか」という観点で、いくつかの例を見ていきましょう。

不満1:同じ値が何度も登場する

例えば、リンクテキストの色を指定するには、CSS ではこのように書きます。

この

という色を、リンクテキスト以外、例えばボタンや枠線の色にも使う場合は、

といったソースコードになります。

ソースコードが位置的にこのように隣り合っていれば、すぐに値をコピペできるのですが、何十行、何百行も離れていると、その値があるところまでもどってコピー。

そしてまた戻ってペースト、なんてことをしなくてはならなくなります。これはなかなか面倒ですよね。

解決1:変数を使う

Sass なら、こう書けます。

最初に「$link は #00ccff ですよ」と書いておくと、あとは「$link」と書くと、#00ccff になってくれるのです。

16進数のカラーコードは覚えづらいですが、意味のある文字列なら覚えやすいのではないでしょうか。

いかがですか? Sassが「工数を減らし」「保守性を向上する」という理由がお分かりいただけたでしょうか?

ここでご紹介した機能は、まだほんのさわりで、これ以外にもたくさんの便利な機能があります。

コーダー・マークアップエンジニアの人が使いこなせば、もっとたくさんの効果が得られるでしょう。

5.Sassのデメリット

ただし、Sass は良いことづくめではありません。いくつかのデメリットもご紹介しておきます。

学習コストが必要

普段から CSS を書いている人ならば、そこまで負荷の高いものではありませんが、Sassを使いこなすには、やはりある程度の学習が必要になります。

不慣れな内は、「基本は普通の CSS で、Sass は使いやすい便利な機能のみに限定する」といった運用が良いかも知れません。

導入にクセがある

Sassは通常のアプリケーションのように、「zipを解凍するだけ」や「.exeをダブルクリックするだけ」では導入できません。

いわゆる『環境設定』をしてやる必要があるのです。

こちらのサイトで、導入時の設定を少し紹介していますので、参考にしてください。

管理するファイルが増える

通常、CSSの拡張子は、.cssですが、Sassを使った場合の拡張子は、.scssになります。これを.cssファイルに変換して利用するのです。

そのため .css ファイルの他に .scss ファイルも管理する必要があります。

6.まとめ

このように、通常のソフトに比べると導入に少しクセのあるSassですが、プログラマとして勉強するには、非常に良い素材です。

何より、CSSのコーディングを一気に加速してくれます。このメリットは、Webサイトを1度でも作られた方には、ご理解いただけるはずです。

環境を設定する際、Rubyのインストールも必要になってきますので、ぜひそちらも1度経験しておかれることをお奨めします。

LEAVE A REPLY

*
* (公開されません)

CAPTCHA


*

COMMENT ON FACEBOOK