SCSSを始めるためのRuby導入手順やSassのインストールあれこれ

SCSSを始めるためのRuby導入手順やSassのインストールあれこれ

スポンサーリンク

スポンサーリンク

今回の記事では、

を紹介します。

そもそもSCSSとSASSの違いって?

「CSSも熟知してきたし、SCSSを始めてみようかな」と考えた方が、ネットであれこれ調べると結構な確率で遭遇するのが、SCSSとSASSというよく似たスペルの単語だと思います。

特に多いのが、「SASS(SCSS)の書き方」というようなタイトルの記事で、私も1年程前にはこういった記事が上位に表示されることがとても多く、困惑したことを覚えています。

まず結論から言うと、SCSSとSASSの違いは記述ルールです。具体的なルールはここでは説明しませんが、CSS部分の記述は同じでもルールそのものが異なります。

そして記述ルールの次に覚えておきたいのが、SCSSはSASSの記述をCSSに近い書き方で表現できるようになった言語、だということです。

元々はSASSという名称だったものが、バージョンアップデートを重ねるに連れてCSSに近い書き方が出来るようになった結果、SCSSという名称に変化していった、という感じでしょうか。

※ここで重要なのは、SASSはSASSの記述ルールのままでそのまま使われ続けている、ということです。

先ほども挙げましたが、「SASS(SCSS)の書き方」のようなタイトルだと、まるでSASSとSCSSが同一かと捉えてしまうかもしれませんが、記述ルールは異なるのでご注意ください。

SCSSとSASSの違いは記述方法

SCSSを始めるためのRuby導入手順やSassのインストール方法

SCSSを記述するためには、

  1. Ruby
  2. Sass

の2点をインストールする必要があります。

Rubyのダウンロードとインストール

※Macをお使いの方は、Rubyは標準でインストールされているのでこの手順は飛ばしてください。

Windowsをお使いの方は、以下公式サイトダウンロードページよりPCのビット数に適したバージョンをダウンロードし、その後インストールしてください。

http://rubyinstaller.org/downloads/

※インストールする際に、「Rubyの実行ファイルへ環境PATHを設定する」という項目にチェックを入れるのを忘れないでください。

Rubyをインストール

Sassのインストール

続いてSassをインストールするのですが、なぜSCSSを記述するためにSassをインストールする必要があるのかを簡単に説明します。

冒頭でも書きましたが、SCSSは元々SASSの記述ルールだったものがよりCSSに近くなった言語です。根本的な記述のための言語はSassというものなので、SCSSを記述するためにはSassをインストールする必要がある、ということです。

それではSassのインストール方法を、Mac/Windows別にそれぞれ説明します。

Mac

  1. Terminalを起動します
  2. 「sudo gem install sass」と入力(コピペでOK)してreturnを押します
  3. Mac OSのユーザーパスワードを入力します
  4. 5秒程待つと画面が動き出してインストールが完了します

Windows

  1. コマンドプロンプトを起動します
  2. 「gem install sass」と入力(コピペでOK)してEnterをおします
  3. 5秒程待つと画面が動き出してインストールが完了します

コマンドプロンプトでSassをインストールする

これでSassのインストールが完了しました。

SCSSをCSSにコンパイルする無料ツール(Koala)の初期設定

SCSSをそのままサーバーにアップロードしたり、HTMLやPHPで読み込むことは出来ません。

そこでSCSSをCSSにコンパイル(変換)する必要があります。webサイトでCSSを読み込む際は、「SCSSを返還したCSS」を読み込むことになります。

コンパイルする方法は大きく分けて2つありますが、手順も少なく何より便利である無料ツール「Koala」を使った方法を紹介します。

Koalaのダウンロード

まずはKoala公式サイトより、無料ツールであるソフト「Koala」をダウンロードして下さい。

http://koala-app.com/

Koalaをダウンロードする

初期設定>日本語対応

Koalaをダウンロードしたら、続いて初期設定を行います。

まずは日本語化を行います。

※英語のままでも問題ない方はこの手順は飛ばしてください。

Koalaを日本語対応にする

歯車アイコンをクリックし、「General>Language」をクリックした後に日本語を選択し、OKボタンをクリックします。その後Koalaを一度閉じて、再度起動します。

初期設定>自動コンパイル化とアウトプットスタイル

続いて、SCSSをCSSにコンパイルする際の設定をします。

この設定をするには、SCSSファイルとSCSSファイルを保存するフォルダの2つが必要になってきます。また、SCSSを実際にCSSにコンパイルするときのテスト用にも使うので、わかりやすいように以下のようにしてください。

  1. デスクトップ上に「SCSSというフォルダを作成」します
  2. 1で作成したSCSSフォルダの中にテキストエディタで「style.scss」を作成し保存します
  3. デスクトップに作成したSCSSフォルダ(中にはstyle.scssが入っている)をKoalaの左サイドの位置にドラッグ&ドロップします
  4. Koalaに収納されたSCSSフォルダをクリック>フォルダに収納されているstyle.scssが表示されるのでクリックします
  5. Koalaの右側に以下の画像のような表示が出るので自動コンパイルにチェックを入れ、アウトプットスタイルを「expanded」にします

※5のアウトプットスタイルを「expanded」にする理由は、SCSSをCSSにコンパイルした際にわかりやすい表示にするためです。SCSSのコンパイルに慣れてきたら、expanded以外のスタイルも試してみてください。

 

Koalaのアウトプットスタイルを選択

オプションについては、どれにチェックを入れてもコンパイルそのものに変化はありません。例えば3つ目の「Line Comments」にチェックを入れて、SCSSをCSSにコンパイルした際は、CSS内にSCSSのどこの部分かを示すコメントが自動的で記入されるようになります。

初心者の方には有難い機能かもしれませんが、CSSを熟知している方であれば、正直コメントなんて無くてもわかるかと思います。

これでKoalaの初期設定が完了しました。

Koalaを使って試しにSCSSを書いてCSSにコンパイルする方法

最後に、Koalaの初期設定をするために用意したSCSSファイルを使って、実際にCSSにコンパイルする方法を説明します。

SCSSファイルをテキストエディタで開いて、以下のように記述します。

そして保存すると、SCSSファイルを収納しているSCSSフォルダの中に、「style.css」ファイルが自動的に生成されます。

SCSSフォルダの中にstyle.cssファイルが自動的に生成される

自動的に生成された「style.css」をテキストエディタで開き、以下と同じ記述になっているかを確認します。同じ記述になっていればSCSSをCSSへコンパイルすることに成功したということになります。

まとめ

CSSを約6年程使いながら覚えると共になれ親しみ、次いで効率化を図るためにSCSSにチャレンジしたのが丁度1年前でした。

実際にSCSSで記述するようになってからの1年間で感じているのは、

  • 効率化という面では20%程の作業時間短縮に繋がったこと
  • HTMLやPHPの内部構造にもそれまで以上に意識を注ぐようになったこと
  • 総じてHTML、CSS、PHP(関数含め)をより知ることが出来たこと

でしょうか。

全く新しいCSSを必要とするクライアントワークをこなすと同時に、そのクライアントワークにおいてSCSSを活用していたことで、短期間でそれなりに覚えることが出来ました。

SCSS初心者の皆様も、是非実践で使いこなすことが出来るようになってください。

ここまでお読みいただきまして、誠にありがとうございました。

スポンサーリンク

スポンサーリンク

スポンサーリンク