プログラミング

CSSの記述をシンプルにするSassのインストール手順を解説【Mac】

投稿日:2018年1月2日 更新日:

現役エンジニアがおすすめするプログラミングスクール
TechAcademy:全国どこからでも受講可能。講座が豊富。
CodeCamp:マンツーマンレッスンだからスキルが身につきやすい。
Tech Boost:最新技術が学べてキャリアサポートが充実。

CSSでコーディングをする際に何度も同じような内容を書くのは面倒ですよね。この悩みを解決する方法があります。

それがSassを使うことです。このSassと使い方を詳しく説明していきます。

スポンサーリンク

Sassとは

Sass(サス)とは、CSSをより効率的に書くことができる言語です。CSSはどんなフロントエンドエンジニアでなくても使う機会は多いですし、Sassも使えるようになっておくべきですね。

Sassの記法は、Sass記法とScss記法の2通りあります。主流なのはScss記法の方なので、この記事でもScss記法の使い方を説明していきます。

 

Sassを使うメリット

Sassを使うメリットとしては以下の2点があります。

  • CSSのコード記述量を減らすことができる
  • コードを再利用できて変更も楽

このメリットがどんな意味なのかはSassとCSSのコードを見比べるとすぐに分かります。

SassとCSSの違い

SassとCSSの記述の違いはいくつもありますが、以下が分かりやすい例です。

こちらはCSSでの記述。

そして、これがSassでの記述

このようにSassでは入れ子構造での記述ができます。.exampleというクラス名を二度も書かなくて済むわけです。これはつまり、クラス名に変更があった場合にも二度も訂正しなくて済むわけです。

 

SassのMacでの導入手順

SassをMacで使うための導入手順を説明していきます。

Macであればターミナルにコマンドを一つ実行するだけで利用できるようになります。
そのコマンドが以下。

念のためにSassがインストールされたか確認しておきましょう。以下コマンドでSass 3.5.3 (Bleeding Edge)のような文字が返って来ればインストールできています。(数字の部分は異なっていてもOK)

Sassファイルはブラウザで読み込むことができないので、CSSに変換をしなければいけません。しかし、Ruby on Railsに関しては自動的にSassファイルをCSSに変換してくれるので例外です。

Sassの変換もターミナルでコマンド一つ実行するだけでできます。(ファイル名は自由)

しかし、いちいちCSSコーディングをする度にターミナルでコマンド実行するのは面倒ですよね。この変換を自動的にやってくれるツールがあります。

 

Sassを使うときにはGUIコンパイラが便利

GUIコンパイラとは翻訳機みたいなものです。僕が使っているのはPreprosというツール。
GUIコンパイラでPreprosの他にはCodekitも有名ですね。

Preprosは、高機能なのでSassをCSSに変換すること以外にも色々とできます。MacだけじゃなくてWindowsでも使えるのも嬉しいポイント。
Preprosについて詳しいことが知りたい方は下の記事を見てください。

変換までの仕方はすごく簡単で、右下の「+」のところからプロジェクトを登録するだけ。あとは、エディタでSassで書いたコードを保存するたびに自動でCSSに変換を行ってくれます。超便利。

 

SassでCSSコーディングを爆速に

Sassでのコーディングになれればコーディングが爆速になります。最初はなかなか慣れず、むしろ大変に感じるかもしれませんが、コーディングを少しでも効率化するために必ず使えるようになっておいた方がいいですね。記述方法もすぐに覚えられるボリュームですし。

Scss記法でよく使う記述方法については以下の記事にまとめてあるので、これからSassでのコーディングに挑戦しようと思っている方や、まだScss記法を理解しきれていない方は参考にしてみてください。

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

-プログラミング