【Win・Mac】Sassを導入＆初めてScssを使ってみる

2015/11/28 2017/01/31

Pocket

こんにちは、okutani(@okutani_t)です。今まで、Webコーディングの際はCSSでちょこちょこ書いていたのですが、最近はやりのSassを使ってみました。

仕事場の開発環境がWindows、自宅がMacなので、それぞれの導入手順を本記事に記しておきます。

Sassとありますが、実際に利用するのは『Scss』です。かんたんな説明ですが、次のような違いがあります。

Sass（ruby/hamlライク）
Scss（css3ライク）

最近ではCSS3ライクである『Scss』が主流なようです。Scssは、Sassをインストールすれば利用できるようになるため、『SassをインストールしてScssを利用する』といった流れになります。

なお、Scssを利用するには以下が必要です。

1. Ruby
2. Sass本体

ドットインストールにも解説が載っているので、一度目を通しておくと良いかと思います。

参考Sass/SCSS入門 (全15回) – プログラミングならドットインストール

本記事では、Windows・MacそれぞれにSassをインストールをおこない、かんたんな使い方を説明しています。

では、はじめにRubyをインストールするところから始めていきましょう。

1 Rubyのインストール
- 1.1 Rubyのインストール確認
2 Sassのインストール(Windows)
3 Sassのインストール(Mac)
4 Sassを使ってCSSファイルを生成してみる
- 4.1 CSSファイル生成を自動化する
5 まとめ

Rubyのインストール

SassをインストールするためにRubyが必要です。Rubyが何かよく分からなくても大丈夫なので、ここは気にせずにRubyのインストールを進めましょう。

Macの場合、Rubyはデフォルトでインストールされているため、そのままSassのインストールの項目まで進んでください。

Windowsの場合は、下記サイトから実行ファイルをダウンロードします。

LINKDownloads

今回は、2015.11現在の最新版である「Ruby 2.2.3 (x64)」をダウンロードしました。

ダウンロードが済んだら、ダブルクリックでインストーラーを実行しましょう。

『インストール先とオプションの指定』まで進み、次のとおりに設定します。

『Td/Tkサポートをインストールする』はGUIアプリケーションの作成を可能にするオプションです。ここでは不要なのでチェックしませんでした。

『Rubyの実行ファイルへ環境変数PATHを設定する』にチェックを入れます。これをチェックしないとRubyが実行できないので注意してください。

『.rbと.rbwファイルをRubyに関連づける』にチェックしておくと自動で.rbファイルをRubyのファイルとして扱ってくれるのでチェック。

チェックが済んだら、そのままRubyのインストールを進めてください。

Rubyのインストール確認

問題なく進めば、Rubyのインストールが完了します。

Rubyが無事にインストールされたか、コマンドプロンプトを使って確認してみましょう。次のコマンドで確認します。

> ruby -v

Rubyのバージョンが確認できればOKです。

Macの方でも一応、Rubyが入っているか確認しておきましょう。

$ ruby -v

では、次にSassを導入していきます。

Sassのインストール(Windows)

WindowsにSassをインストールする手順を紹介します。インストールはコマンドプロンプトにコマンドを入力して行っていきます。

まず初めに、文字コードをUTF-8にして文字化けを防いでおきます。

> set LANG=ja_JP.UTF-8

Sassのインストール時に使う『RubyGems』をアップデートしておきます。

> gem update --system

RubyGemsを使って、Sassをインストールします。

> gem install sass

これでWindowsにSassが導入できました。

下記のコマンドで無事インストールされたか確認しておきましょう。

> sass -v

Sassのバージョンが表示されればOKです。

Sassのインストール(Mac)

MacにSassを導入する手順を紹介していきます。

ターミナルを開いて、次のコマンドでRubyGemsをアップデートしておきます。

$ sudo gem update --system

次のコマンドでSassをインストールします。

$ sudo gem install sass

これでMacにSassがインストールされました。確認しておきましょう。

$ sass -v

バージョンが表示されればOKです。

Sassのインストールが済んだので、実際にScssを記述して、CSSファイルを生成してみましょう。

Sassを使ってCSSファイルを生成してみる

かんたんですが、Sassの使い方を載せておきます。

『style.scss』という名前でファイルを作成し、下記を記述。

#main {
  width: 940px;
  p {
    font-size: 14px;
  }
}

このように『#mainの中にあるp』を、入れ子にして書くことができます。直感的で分かりやすいですね。

ではさっそく、ScssからCSSに変換(コンパイル)してみましょう。

まずはコマンドプロンプト(Macはターミナル)のcdコマンドで.scssファイルがある場所まで移動します。

例として、デスクトップにstyle.scssがある場合は次のとおりです。

$ cd ~/Desctop

次のコマンドで、style.scssからstyle.cssを出力することができます。

$ sass --style expanded style.scss:style.css

これで、style.scssからstyle.cssを生成することができました。ちなみに『--style expanded』オプションをつけてあげることで、インデントをきれいに整えてくれるので便利です。

--style expandedなし

#main {
  width: 940px; }
  #main p {
    font-size: 14px; }

--style expandedあり

#main {
  width: 940px;
}
#main p {
  font-size: 14px;
}

また、.scssと.cssファイルがそれぞれscss, cssフォルダに格納されている場合は、

$ sass --style expanded scss/style.scss:css/style.css

としてあげればOKです。

CSSファイル生成を自動化する

毎回、わざわざコマンドを打ってCSSに変換するのはめんどうですね。

次の手順をおこなうと、.scssファイルを保存したとき自動で.cssファイルに変換して出力してくれます。

$ sass --style expanded --watch scss:css

上記コマンドをかんたんに解説すると、『scssフォルダ内のファイルが変更されたら、cssフォルダに書き出す』といったことが自動化される、といったものです。

style.scssに何か変更を加えて保存してみましょう。自動でcssフォルダの中にあるstyle.cssに、変更が反映されます。

自動変換を終了したい場合はCtrl + Cを入力しましょう。

とても便利にCSSを書くことができました。この機会にぜひScssを活用してみてください。

まとめ

Windows・MacにSassを導入する方法と、Scssのかんたんな使い方を説明しました。

さらに、Compassなどのフレームワークを使うとより便利に使えます。興味がある方は調べてみてください(僕もまだ勉強中…)。

HTML,CSSをよく書く方は、この機会にSass(Scss)を使えるようになっておくと良いですね。参考にしてください。

Pocket

okutani (okutani_t) のヒトコト

okutani_t

前まではLessをちょこちょこ使っていたのですが、Bootstrap4からはScssが使われるようなので切り替えてみました。自動コンパイル便利ですね！( ´ ▽ ` )ﾉ

Web開発のお仕事を募集しています

フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。

「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。

ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。

LINKお問い合わせ

LINKokutani's Portfolio

- CSS