プラカンブログSTAFF BLOG

2017.07.20

そろそろ始めよう!Sassを味方につける【導入編】

最近膝と腰に痛みを感じるKIKUCHIです。こんにちは。
 
前回、そろそろ始めよう!Sassを味方につける【基本編】という記事を書かせていただきました。
今回はその続きで【導入編】です。
弊社の作業環境がWindowsのため、Windowsベースでお話させていただきます。
 
以下、私の作業環境です。
PC … Windows 10 Home / エディター … Brackets
注)この記事の筆者はしがないwebデザイナーのため、プログラミング系の難しい話はなんとなくでしか書けません!不確かな部分もあるかもしれません!すみません!もっと勉強します!

WindowsでSassを使いたい!

1. Rubyをインストール

Sassを使用するためには「Ruby」が必要になります。
「Ruby」ってなに?と思う方もいらっしゃると思いますが、一旦置いといてひとまずインストールしてみましょう。
(Macには元々インストールされていますが、Windowsにはありません。なんてこった。)
 
RubyInstallerのダウンロードページ から最新版をダウンロードしてください。
(2017年6月7日 時点では「Ruby 2.4.1-1」が最新版)
後は下記の通りの手順で進めていただければオッケーです。
 
 
「Finish」を押した後になにやら不気味な黒い画面が立ち上がりますが、難しそうなので一旦閉じましょう。
 
続いて、Rubyがインストールされているか確認します。
黒い画面ことコマンドプロントを起動します。…え??黒い画面?コ、コマンドプロント????何それ???怖い!
先程突然立ち上がってきた黒い画面、そうアレがコマンドプロントです。
ひとまず、スタート → すべてのアプリ → Windows システムツール → コマンドプロント を起動しましょう。
起動したら「ruby -v」と入力してEnter
 
 
「ruby バージョン名」が表示されていたらオッケーです。

2. Sassをインストール

無事、Rubyがインストール出来たらいよいよSassをインストール!
コマンドプロントで「gem install sass」と入力してEnterをするとインストール出来ます。
 
 
Ruby同様、Sassもインストールされているか確認してみましょう。
「sass -v」と入力してEnterをすると、下記のように表示されるはずです。
 

よ~し!Sassのインストールが出来たぞー!
…で、どうやって使うんだ?コンパイルしなきゃだったよな~?

Compassでコンパイルする

はい。続いてコンパイルの方法についてです。
コンパイルの方法は色々ございますが、個人的に一番やりやすいと感じた方法をご紹介します。
それが「Compassでコンパイルする」です。
Compassとは?円を書くために用いる器具ではございません。
 
~Compassとは~
SassおよびCSSの機能を拡張するオープンソースのCSSオーサリングフレームワークです。
ざっくりいうと、便利なSassをさらに便利にするためのフレームワークです。
ということで、Compassをインストールしましょう。
コマンドプロントを起動して、「gem install compass」と入力→Enter。
 
 
「compass -v」でインストールされているか確認できます。
 

実際にコンパイルしてみよう

さぁ、これで土台は整いましたね。
それではここからCompassでコンパイルするための流れを説明します。
こういうのは実際にやりながらの方が分かると思うので、不明な点があってもひとまずやってみましょう~!よっしゃいくぞー!

1. 作業用のフォルダを作成

今回はデスクトップに[test]というフォルダを作ります。

2. コマンドプロントで該当ディレクトリに移動

「cd」と入力し半角スペースを明けて移動したいディレクトリ(今回はデスクトップ上の[test]フォルダ)へのパスを記入→Enter。
もしくは、黒い画面に向かって[test]フォルダをドラッグ&ドロップ→Enterとすると、簡単に移動出来ます。
 

3. 「compass create」実行

このコマンドで下記のファイルが[test]フォルダ内に作成されます。
  • CSSファイル(3つ)
  • SCSSファイル(3つ)
  • config.rb
  • .sass-cache(コンパイル時間を短縮するために作られるファイル)
特に指定がない場合、SCSSファイルは「sass」フォルダ、CSSファイルは「stylesheet」フォルダの中に作成されます。
フォルダ名を指定したい場合は「compass create –sass-dir “scss” –css-dir “css”」を実行すると、SCSSファイルは「scss」フォルダ、CSSファイルは「css」フォルダの中に作成されます。
※後からフォルダ名の変更も可能

4. 作成された「config.rb」ファイルを修正

「config.rb」は、コンパイル後のCSSファイルの構造(アウトプットスタイル)の指定等、様々な設定をするファイルです。
詳細は省きますが、私はいつも下記のような形でまとめています。
 
 
※このファイルでCSSやSass等のフォルダ名を変更出来ます。config.rbを修正したら実際のフォルダ名も変更しましょう。

5. 「compass w」を実行

「compass w」→Enterとすると、監視が始まります。
監視とは、このコマンドによりSCSSファイルをいじって保存をする度に自動でコンパイルをしてくれる、ということです。便利!
さらに、閉じタグの入力がない等の構造的なエラーは「ここがおかしいよ!」と表示されるので、CSSの記述ミスもなくなります。
今回でいうと、監視をする前に修正したファイルの情報についても表示されます。
 
 
監視を終了する場合は「Ctrl + C」で終了するか聞かれるので、「y」を入力→Enterとすると終了します。
 

最後に

いかがでしたか?インストールもコンパイルもスムーズに出来ましたでしょうか?
導入する際は、作業される環境によってうまくインストールやコンパイルが出来ない場合もあります…。
私がぶち当たったトラブルを、見事解決してくださった尊い参考サイトをここでご紹介しておきます!
 

・サーバー上にあるファイルがコンパイル出来ない…
[解決法]Sassのwatchが効かない!ディレクトリを変えたら動きました

・shift-jisで保存したい…
[解決法]SASSで文字コードの指定ができない!?の解決方法

ここまできたら70%くらいはSassを味方につけることが出来ているのではないでしょうか?
次回、シリーズラストの「そろそろ始めよう!Sassを味方につける【運用編】」です!

+dc(菊)

この記事は、KIKUCHI が書きました。