CSSをある程度勉強していると、この書き方なんだか面倒だなと感じることはないでしょうか。
今回はそんな悩みを解決してくれるsassについてご紹介します。
目次
sassとはCSSをより簡単・美しく書けるCSSプリプロセッサ
sassとは、簡単に言えばCSSをもっと便利に使うための言語です。
CSSでプログラムを書いているときに、やたら長くなってしまったり、同じようなコードを何度も繰り返し使ってしまうことはありませんか。
冗長なコードを書くと構造把握が難しくなります。
結果プログラムを改変したいときどこを読めばよいのかわからなくなったり、コード同士が衝突して思うようなCSSスタイルが表現されなかったりします。
このような問題点を解決するために登場したのが、CSSプリプロセッサという言語です。
変数やループ処理、ネスト構造などJavascript等のプログラミング言語に近い機能を持ったCSSプリプロセッサを使えば、効率的にCSSを書くことができるのです。
CSSプリプロセッサにはsass、Less、Stylus、PostCSSなど複数の種類があります。
その中でも普及率が高いのがsassです。就職したい現場で指定されているなど特別な事情がない限り、最初に学ぶCSSプリプロセッサにはsass（scss）がお勧めです。
sassとscss
sassには実は2つの記法があります。sassとscssです。
もともとはsassの記法が使われていましたが、現在はCSSに近い書き方をしているscssの方が人気です。
今までCSSを学習してきた人なら、scss形式の方が抵抗なく学ぶことができるでしょう。
※以下の記事ではscssの記法を使って解説しています。
sassの便利な仕組み
では、具体的にsassのどのような点が便利なのかを見ていきましょう。
入れ子構造による表現
sassでは入れ子構造によるコードの簡略化が可能です。
以下のコードはCSSで書いたものです。
- #header {
- width: 80%; }
- #header p {
- font-size: 20px;
- color: black; }
- #header p a {
- color: #823030; }
- #header p a:hover {
- color: #13eaea; }
同じheaderIDに対して、繰り返し指定が行われており、非常に見づらい印象を受けます。
このコードをsass(scss記法)で書いてみましょう。
- #header{
- width:80%;
- p{
- font-size:20px;
- color:black;
- a{
- color:rgb(130, 48, 48);
- &:hover{
- color:rgb(19, 234, 234);
- }
- }
- }
- }
#headerの{}中にpやpの下にあるa要素が入れ子構造になって配置され、すっきりした見た目になりました。
#headerの指定を繰り返す必要がないため、コードを書く手間も省けます。またCSSのコードを見ただけで、要素同士の関係（たとえば#headerの中にpタグがあり、さらにその中にaタグがある）が視覚的に理解できるので、コードを見返すときも分かりやすいですね。
変数による表現
Webページを作るとき、このパーツとこのパーツは同じ色にしたい、同じ文字の大きさにしたいということがあると思います。
このようなときに、パーツの色やフォントサイズを変数に格納しておけると便利です。
sassでは文字列や数値、真偽値などを変数に代入して、他のパーツに使いまわすことができます。
sass（scss記法）での変数宣言は$で行います。例えば、以下のコードでは複雑な「#4c93d1」というカラーをheader-colorという変数に代入して使っています。
変数名を自分の使いやすいものにすれば、CSSでのコーディング作業がはかどるでしょう。
- $header-color::#4c93d1;
- #header{
- color:$header-color;
- }
また変数にはファイルパスを代入することもできます。
画像を指定する際に面倒なURLの指定を変数で行うと、CSSコードがかなりすっきりして見えます。
- $img:”../documents/web素材/photo”;
- #header{
- background-image:url($img+”header.png”)
ifやwhileによる条件分岐、ループ処理等
プログラミングではおなじみのif文による分岐表現やwhile/for文によるループ処理がsassでも利用できます。
更には関数を使うことも可能です。sass内にもともと用意されている組み込み関数を使うこともできますし、自分で定義した自作関数を作成することもできます。
いままでWebコーディングで複雑な条件分岐を行ったりループ処理をしたりするにはJavascriptやPHP等の別のプログラミング言語が必要でした。
関数を使う表現も同様です。
しかし、sassを使うことで、ある程度のプログラム処理がCSS内でできてしまうのです。
複数のCSSをまとめて管理できる@mixinと@extend
sassには複数のCSSコードをまとめて利用できる@mixinと@extendという機能があります。
例えば、フォントサイズ20px、文字の色#ea3535、背景色#ede9e9という設定をいくつかのパーツに利用したいとき@mixinを使って以下のように書きます。
- @mixin colum{
- font-size:20px;
- color::#ea3535;
- background-color: #ede9e9;
- }
- .prof{
- @include colum;
- }
- .memory{
- @include colum;
- }
- .desc{
- @include colum;
- }
すると、
- {
- font-size:20px;
- color::#ea3535;
- background-color: #ede9e9;
- }
というCSSコードが、.prof、.memory、.descのパーツすべてに反映されます。
また同じように複数の設定をまとめる機能に＠extendがあります。
こちらは元の型となるCSSコードを作り、そちらを複数のパーツに継承させるときに向いています。
たとえば、コラム用のCSSコードを1つ設定し、コラム１、コラム２などそれぞれのパーツにコードを継承させたいときなどに使います。
sassの学習に必要な知識・環境
sassはCSSを効率よく書くための道具ですので、まずはCSSの知識を身に着けていることが学習の大前提です。
次にCUIと呼ばれる画面でのコマンド操作法です。
sass（scss記法)で書いたCSSコードはそのままでは使えません。
CUIでのコマンド操作を通して、sassをCSSに変換する必要があるのです。
CUIとはWindowsでいうコマンドプロンプト、Macでいうターミナルです。
グラフィカルなソフトによるマウス操作が主流のご時世、キーボード操作だけで動くCUIがパソコンに入っているということを知らない人もいるかもしれません。
難しそうで抵抗があるという人は、GUIコンパイラをつかえばコマンド操作なしでsassを扱うことができます。
CUIコンパイラにはPreprosやkoalaなどのソフトがあるので自分に合うものを選んでください。
ただ、コマンド操作はC言語などのプログラミングでは必須になります。
HTMLやCSSだけでなく他のプログラミング言語も学びたいという人は、sassをきっかけにコマンド操作を学ぶのも良いのではないでしょうか。
また、sassを使うにはRubyというプログラミング言語が必要になります。
RubyはMacには標準装備されていますが、Windowsの場合は下記の公式サイトからRubyをインストールする必要があります（Ruby+Devkit 2.6.〇(x64) という名前のインストーラーを使用してください）。
インストールの際には、「Ruby の実行ファイルへ環境変数 PATH を設定する」という項目にチェックを入れるのを忘れないようにしましょう。
https://rubyinstaller.org/downloads/
ちなみにRubyのプログラミング知識はsassには必要ありませんので、Ruby未学習者でも安心してください。
sassを学べる動画サイト
sassをオンラインで学べる動画サイトには次のようなものがあります。
Progate（プロゲート）
プログラミングの動作環境がサイト内に用意されているので、学習を始める際の煩わしい環境設定の必要がありません。
演習形式でsassの知識を身に着ける点ができるのも魅力的です。ただし、自分のパソコンでsassを使うには、別途導入方法を学ぶ必要があります。
Schoo（スク―）
「Sassをはじめからていねいに＜概要−基礎編＞」という授業ではCUIコンパイラ「Prepros」を使ってsassを学びます。
CUIの操作が苦手だ、自分のパソコンですぐにsassを使ってみたいという人にはこちらが良いでしょう。
ドットインストール
sassの文法を詳しく学べますが、CUIを使った操作が前提なので、コマンド操作の基礎知識が必要になります。
CUIコンパイラは全く使わず、sassからcssへの変換もコマンド操作で行っています。
ドットインストールではコマンド操作（UNIXコマンド）の使い方も勉強できますので、しっかり知識を身に着けたいという人には最適です。
sass（scss）まとめ
sassを使えばCSSコード作成が簡単になります。
最近ではsassが使えることを条件にコーダーを募集することもあるので、Webデザイナー、Webコーダーを目指している人はsassの勉強をしてみてはいかがでしょうか。
