Sassとは｜学生向けに特徴やメリットをご紹介【就活情報も】

• 1. Sassとは何か｜特徴をチェック
• 2. Sassを使うメリットとは
• 3. Sassを使うデメリットもチェック
• 4. 実際にSassを使ってみよう
• 5. Sassの将来性は？
• 6. 学生向けに解説｜Sassができると就活に有利？

1. Sassとは何か｜特徴をチェック

まずは、Saasの特徴やできることについてチェックしていきましょう。

SassとはCSSを拡張して使いやすくしたもの

Sassは「サース」と読みます。簡潔に言うと、SassとはCSSを拡張して使いやすくしたものです。ホームページの「見た目」を編集するCSSですが、色やサイズの指定などシンプルな役割が多く、複雑なコードは書けません。

簡単なホームページ作成であれば、CSSの機能でも十分です。実際、シンプルなホームページが多かった時代には多くの需要がありました。

しかし、ホームページの見た目は日々進化を続けています。特に近年では、ホームページの見た目はブランドイメージを左右するものとして重要視されています。

複雑なホームページを作成するのに、シンプルなことしかできないCSSでは、使い勝手が良いとは言えません。そこで生まれたのがSaasです。CSSを拡張し、より効率的にプログラムを書けるようになっています。

表記方法にはSASS方式とSCSS方式がある

Sassでのプログラミングには「SASS方式」と「SCSS方式」という2種類の記載方法があります。それぞれ拡張子は「.sass」「.scss」です。

名前からわかる通り、元祖Sassとして生まれたのがSASS方式です。改行やインデントを使い、プログラミングを記述していきます。

SASS方式で書かれたプログラムはシンプルで、文字数が少ないのが特徴です。しかし、記述方法がCSSと違いすぎるため、使いにくいと感じる人も多くいました。

そこで生まれたのがSCSS方式です。Sassの拡張機能はそのままに、プログラムの記載方法はCSSとほぼ同じになっています。CSSのプログラマーにも違和感なく受け入れられました。

そういった経緯もあり、SassはSCSS方式がデファクトスタンダード（事実上の標準）です。ここからは、SassのSCSS方式という前提で話をしていきます。

Sassでできることとは？

SassがCSSを拡張して便利に使えるモノだというのは前述した通りですが、続いては、より具体的にSassでできることについて解説していきます。

1）入れ子構造での記述

Sassの特徴の1つが、入れ子構造（ネスト）で記述できることです。CSSでは、フォントのサイズや色について以下のようなイメージで記載します。
 

• ・フォントのサイズ：24px

  ・フォントの太さ：600

  ・フォントの色：青

一方で、ネストが使えると以下のようなイメージで記載することができます。
 

• ・フォントについて（サイズ：24px、太さ：600、色：青）

大きさや色など、細かく指定したい場合、後者の方が楽なのは言うまでもありません。

2）変数の定義

変数が定義できるのもSassの特徴です。例えば、ブランドイメージが淡いブルーだったとします。この淡いブルーはホームページを作る際、さまざまな箇所で使われるはずです。頻繁に使う色などはmain-colorといった変数で定義しておけば、簡単に呼び出すことができます。

また、「ちょっとだけ青みを強くしたい」という場合には、変数を指定した箇所だけ修正するだけでOKです。

3）四則演算

Sassでは四則演算が可能です。例えば、ブランドロゴを配置するスペースの縦横幅を4:10に決めたとします。

CSSであれば、縦横の値を指定しなくてはいけません。一方でSassであれば、縦か横の大きさを指定すれば、Sass内で計算することが可能です。

4）条件分岐

「もし〇〇なら、××、そうでなければ□□」といったような条件分岐ができることも、Sassの特徴です。

「何に使うの？」と思う方もいるかもしれませんが、開発者側にとってはかなり便利な機能です。

例えば、A案とB案があって悩んでいたとします。CSSであればA案用のファイルとB案用のファイルの2種類を個別に用意しなくてはいけません。また、A案・B案共通している部分を修正した場合、両方のファイルを修正する必要があります。

条件分岐を使えばA案・B案を1つのファイルとして扱えます。共通した部分を修正したい場合、修正するのは1箇所でOKです。

5）コードの呼び出し

@mixinと＠includeという機能を使い、コードの呼び出しが可能です。色やフォントなど共通の設定をまとめて記載して、1箇所にまとめておくことができます。

「色を変えたい場合にはここを編集」「フォントを変えたい場合にはここを編集」となるので、作業が楽になりますし、ミスの削減にもつながります。

コンパイルが必要

CSSの代わりに使えるSassですが、作ったファイルをそのまま使うことはできません。コンパイルという作業を通じ、「.scss」ファイルを「.css」ファイルに変換する必要があります。

2. Sassを使うメリットとは

続いては、Sassの具体的なメリットについて解説していきます。

作業効率が上がる

Sassを使う大きなメリットの1つは、作業効率が上がることです。例えば、入れ子構造（ネスト）を使えば、プログラムの行数や文字数を大幅に減らすことができます。

行数や文字数が少ないということは、プログラムを書く時間を削減できるということです。タイプミスを減らせるのもメリットと言えるでしょう。

また、変数が使えるため作業効率アップにつながります。例えば、カラーコードが#AEE7DAA6という色（緑がかった淡いブルー）をよく使うとします。

この色を使うたびに#AEE7DAA6と打ち込んでいては大変です。この文字列を覚えておくことは大変なので、コーディングの際にはどこかからコピペをすることになるはずです。

1回や2回であれば「コピペ元を探して、コピーして、ペーストする」という作業はそれほど手間ではありません。ですが、何度も続くと、結構な時間を無駄にしてしまうでしょう。

これを変数として覚えやすい名前で定義しておけば、面倒なコピペの手間が省け、時間を有効に使うことができます。ちょっとしたことですが、こういった作業の積み重ねによって、作業効率が大幅にアップするものです。

さらに、色をちょっとだけ修正したいと思った場合、変数で指定した箇所を変更するだけでOKです。1箇所の修正で済むので、作業負荷を大幅に減らせます。変更モレといったミスを防ぐことにもつながるでしょう。

可読性・メンテナンス性が上がる

可読性・メンテナンス性が上がるということも、Sassを使うメリットと言えます。ホームページは1度リリースして終わりというケースは稀です。

新しい商品やサービスが生まれたら、その情報を追加する必要がありますし、問題があれば修正をしなくてはなりません。

知らない誰かが書いたコードをさわるというケースも多いものです。単純なホームページであれば、CSSも単純なので、修正するのはそれほど大変ではありません。

しかし、ホームページが複雑だと、CSSも複雑になります。書かれている情報を読み取るだけで大変なため、CSSの修正にかなりの時間がかかってしまうこともあるでしょう。

Sassであれば、入れ子構造や変数、あるいは関数の呼び出しなど、ソースコードをすっきりとさせることができます。

すっきりと書かれたコードは誰が読んでもわかりやすく、スムーズなメンテナンスが可能です。また、修正モレが発生しにくいというメリットもあります。

3. Sassを使うデメリットもチェック

このように、Sassには多くのメリットがありますが、デメリットも存在しています。

コンパイルの手間がある

Sassで記述したファイルは、拡張子が.scssというファイルです。このままではhtmlファイルが読み込めないので、コンパイルして.cssファイルを作成しなくてはなりません。このコンパイルがSassを使うデメリットの1つです。

コンパイルの作業自体は一瞬で終わるので、それほど大変ではありません。しかし、場合によってはコンパイルエラーが発生することがあります。

エラーの原因がわからず、時間だけが過ぎていく……なんてことも少なくないでしょう。これは、コンパイルという手間があるSassならではのデメリットと言えます。

全ての現場で使えるわけではない

コンパイルの手間があるとはいえ、Sassはそれ以上に便利なので、使い始めると手放せなくなる人も多いです。しかし、CSSのことは忘れてよいのかというと、そうではありません。場合によってはSassが使えないケースがあるからです。

例えば、クライアントの希望により、CSSを使って開発をしなければならないときがあります。

このような事態に備えて、CSSとSassのいずれも使いこなせるようにしておくのが望ましいでしょう。

4. 実際にSassを使ってみよう

それでは、実際にSassを使ってみましょう。インストールから、コンパイルの方法まで解説していきます。なお、今回はCSSについてある程度理解している前提で説明しています。

Sassのインストール

Sassを使うためには、まずはSassのインストールが必要です。そして、SassのインストールにはRubyが必要となります。

Macであれば標準でインストールされていますが、Windowsの場合は自分でインストールをしてください。Rubyのインストールは、Rubyのダウンロードページから行います。

Rubyの詳しいインストール方法に関しては省略しますが、基本的にインストーラーの指示に従っていけばOKです。

Rubyのインストールができれば、次はSassのインストールです。Windowsであればコマンドプロンプトを、Macであればターミナルを立ち上げて、以下を入力してください。
 

コマンドプロンプト（あるいはターミナル）にいろいろ表示されますが、それが止まればSassがインストールできているはずです。

コンパイルしてみる

続いてはSassを触ってみましょう。適当な場所にSass-Testというフォルダを作ります。そして、フォルダの中でtest.scssというファイルを作りましょう。メモ帳などでtest.scssを開き、以下をコピペして保存します。
 

次に、コマンドプロンプト（あるいはターミナル）でSass-Testフォルダに移動します（フォルダの移動にはcdというコマンドを使います）。
そこで以下のように入力してみてください。

実行後にはSass-Testフォルダ以下にtest.cssファイルが生成されます。コレがSassのコンパイルです。
今回は、シンプルにターミナルを使ったコンパイル方法について解説しましたが、GUI（グラフィックユーザーインターフェース）を利用してコンパイルするためのツールなども存在しています。

入れ子構造を使ってみる

Sassには、入れ子構造（ネスト）ができるという特徴があります。上記サンプルでも入れ子構造が使われていますよね。 border:以下のカッコの中でcolor、style、widthが指定されています。
 

入れ子構造が使えないCSSであれば
 

と記載しなくてはなりません。

変数を使ってみる

続いては変数を使ってみましょう。変数は以下のように定義します。
$変数名: 値;

test.scssの1行目に以下を追加してみてください。
 

そして、color: #000;の部分を以下のように変更します。
 

変数main-colorに指定した値が代入されています。

ソースコードの呼び出しをしてみる

@mixinと@includeを使ったソースコードの呼び出しについて解説します。以下のサンプルコードをみてください。
 

@mixin base以下に基本となる情報をまとめています。そして、.test01や.test02で、baseで定義した値を呼び出して使っているというわけです。コンパイルするとどうなるのか、確かめてみてください。

5. Sassの将来性は？

未来のことなので断言はできませんが、Sassは将来性のある言語だと考えられています。

そもそもCSSは、ホームページの作成に欠かせません。しかし、複雑なホームページを作る場合、作業が大変なことはご紹介してきた通りです。
SassはCSSの弱点を克服し、より使いやすくしたものです。CSSが欠かせない以上、今後もさまざまなシーンで使われることが予想されます。

6. 学生向けに解説｜Sassができると就活に有利？

学生の皆さんであれば、「Sassは就活に役立つの？」ということも気になるはずです。結論から言うと、役立つ可能性は大いにあります。
特にWEBデザイン系など、CSSを多用する分野を目指すのであれば、Sassを身に付けておいて損はないでしょう。

ただし、Sassを使えることが内定に直結するかと言われると、そういったケースは少ないと言えます。

新卒採用をする場合、面接時点でのスキルはそれほど重要視されず、コミュニケーション能力や人物像・将来性など、さまざまな面から判断します。Sassが使えるというのは、その中のほんの一部分に過ぎません。

Sassのスキル自体よりも、「独学でSassを学んだ経験」や「Sassを使ってHP作りのアルバイトをしてみた」ということをアピールできるとよいでしょう。学習に対する姿勢や仕事への向上心を評価してもらえ、好印象につながるはずです。

ITエンジニアを目指す新卒学生向け就活エージェントならレバテックルーキー

レバテックルーキーは、レバテックが運営するITエンジニア専門の就活エージェントです。多数のITエンジニアのキャリア支援経験のあるアドバイザーが、あなたのスキルと希望に合わせた企業の紹介から、人事目線での面接対策など、就職までを一貫してサポートします。ES添削、面接対策、ポートフォリオ作成サポートなども実施していますので、まずは一度カウンセリングにお越しください。

就活アドバイザーに相談してみる