Sassの特徴とは？利用のメリットと使い方

2018.07.27

開発スピードを上げるには必須！

Webサイトなどを作るときに必要なCSSの作成に時間がかかると悩んでいる人はいませんか。そのようなコーダーの悩みを解決する強い味方が「Sass」です。今回は、Sassとは何かということからSassの利用法まで幅広く解説していきます。

Sassの使い方はコレをみれば大丈夫！

01Sassとはどういうもの？
02Sassを利用するメリットとは？
03Sassを導入するには？
03Sassの利用方法は？

効率化の記事一覧

Sassとはどういうもの？

SassとはSyntactically Awesome Style Sheetsの略語であり、CSSを拡張したメタ言語のことを指します。メタ言語とは言語を書くための言語という意味であり、「CSSを効率的に書くための言語」として理解するとわかりやすいでしょう。

Sassには2種類あります。1つ目はSass文法と呼ばれるもので、拡張子は「.sass」です。2つ目はScss文法というもので、拡張子は「.scss」となります。初めにSassが作られましたが、SassはCSSとの互換性があまり良くなかったためにScssが生まれました。Scssの方がCSSの文法に近いため、CSSのゴーディングに慣れている人には使いやすく感じられるでしょう。

同じSassでも、.sassと.scssのファイルではコーディングの際のルールが異なるので注意してください。
例えば、Sassはシンプルな書き方が特徴ですが、Scssは「{ }（括弧）」を多用し入れ子状に書いていきます。こうすることでCSSとの関係を明確にできます。また、Sassでは演算や変数、関数の処理を扱うことが可能です。

＠extendや＠importも行えるので、複数のSassファイルを一つのCSSファイルにまとめたり、スタイルを継承したり上書きしたりすることも簡単にできます。Sassは多機能なメタ言語といえるでしょう。

Sassを利用するメリットとは？

Sassがおすすめの理由は、Sassでコーディングをすると通常よりもコードの量を大きく減らすことが可能となるからです。
つまり、リファクタリングしやすく、メンテナンス性が高まるというメリットがあります。コードの量が単純に少なくなると視認性が向上します。
そのため、メンテナンスの際にはどこに不具合があるのか発見しやすくなり、効率的に作業を行えるようになります。また、コード量が減ることでバグが減ることも期待できます。

とりわけ仕事でCSSのコーディングをする際に、Sassは強い味方となるでしょう。さらに、Sassはコーディングでエラーがあるときはコンパイルの際に示唆してくれることもあるので便利です。

これらの理由から、Sassを使えば開発スピードが向上することも予想されます。仕事の生産性を上げるのにSassは大きく貢献してくれます。

Sassを導入するには？

Sassを使う前に、導入の手順はきちんと踏む必要があります。まず、RubyGemsをパソコンにインストールします。RubyはMacの場合標準でインストールされているため、この工程は飛ばして構いません。Windowsを使っている場合のみダウンロードとインストールを行います。

続いて、Sassをインストールしていきましょう。インストールの際にはgemコマンドを実行します。Macではターミナルを開き、Windowsではコマンドプロンプトを開いて「gem install sass」というコマンドを実行します。Sassのインストールが終わったら「sass --version」のコマンドでバージョン情報をチェックしてください。
バージョン情報が正しく表示されたらインストールは成功です。

Sassの利用方法は？

Sassをインストールしたら早速ファイルの作成を行いましょう。拡張子を.sassにしたファイルを作成し、サンプルコードをコピー＆ペーストして保存してください。これでSassファイルができあがります。コンパイルの方法は手動と自動の2種類あります。

手動の場合、先ほど作成したファイルをディレクトリに移動させたら「sass style.scss:style.css」のコマンドを実行しましょう。そうすると「style.css」という名前でファイルが作られます。このファイルを開いてみて、きちんとコンパイルが行われたCSSが現れたら成功です。

自動でコンパイルする場合は「sass --watch style.scss:style.css」のコマンドを実行し、指定ファイルを監視させた状態を作ります。こうすることでファイルが更新されると自動的にCSSが出力されるようになります。もしもディレクトリごと監視させたい場合は「sass --watch ディレクトリ名」のコマンドを実行してください。

他にも便利なツールはある？

こちらをご覧ください。
作業を効率良く！フロントエンドエンジニアにおすすめエディタ4選

SassはCSSを効率的に書くために積極的に取り入れたい言語です。Sassでは通常よりも圧倒的にコードの量が減るため、コーディング・メンテナンス・修正といった、今までコーダーを悩ませていた作業も減らすことができるでしょう。

今回紹介したSassのメリットを活かせられるようになれば、生産性が飛躍的に向上します。Sassの場合インストールやコンパイルの仕方も難しくはないため、気軽に取り入れられるのも魅力です。また、最近はコーダー、フロントエンドエンジニアだけでなく、WebデザイナーにもSassの知識が求められることがあります。
コーディング作業を効率的に行うためにも、ぜひSassの導入を検討してみてください。