SassのインストールからKoaraによるcssコンパイルまで(ゼロからの開発環境の準備)

SassのインストールからKoaraによるcssコンパイルまで(ゼロからの開発環境の準備)

SassのインストールからKoaraによるcssコンパイルまで(ゼロからの開発環境の準備)

Scssを初めて使う人がScssによる環境を整えるまでのフローは以下の通りです。

・Rubyのインストール
・Sassのインストール
・コンパイルソフトのインストール
・コンパイル先の設定
・Scssフォルダ・cssフォルダの作成
・ジャンル別に分割したscssファイルの作成 ・集約するstyle.scssの作成

Scssを初めて使う人がゼロから開発環境を整えるまでの流れをご紹介します。

Ruby・SassをインストールしコンパイルソフトはKoalaを使っています。

開発環境のScssと出力環境のcssは分けて、Scssファイル自体もジャンル別に分割し、style.scssにimportする形で管理しています。

Scssが使えるようになるまでの初期準備をご紹介

本記事では、SassのインストールからScssによりcssファイルを生成するまでの初期準備の操作をご紹介します。

Scssに関する大まかな説明は、Scssとは?Scssの使い方・書き方をマスターしてCSSへコンパイル変換をご覧ください。

上記の記事でScssがどのような事ができるファイルなのかはある程度お分かりいただけると思います。

これからScssでcssを書いていこうという人向けです。

全く準備の無いゼロの状態から、Scssの開発環境を構築するまでを説明します。

あとはScssを書いていくだけの状態にまで持っていきます。Scssの書き方はまた別記事にてご紹介します。

※今回はWindows環境で説明します。

Rubyをインストール

Scssは本来、プログラムの「Ruby」でできたメタ言語なので、まずはRubyをインストールする必要があります。

インストールする前に、既にRubyがインストールされていないかどうかを確認しましょう。

Rubyのインストール確認

キーボードのWindowsキー+「R」を一緒に押すと、ファイル名を指定して実行のウィンドウが開きます。

名前のフィールド欄に「cmd」と入れて下さい。

ファイル名を指定して実行ウィンドウ

コマンドプロンプトの黒い画面が出てきます。

点滅している欄に「ruby -v」と入れて下さい。

コマンドプロンプト

※-vの前には半角のスペースが入っていますので注意して下さい。

Rubyがインストールされていない場合は、以下のようなガイダンスが出ます。

「内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチ ファイルとして認識されていません。」

この様な表示が出ればRubyは入っていませんので、Rubyをインストールしましょう。

Rubyのインストール

ダウンロード先URL:Ruby

Ruby
英語サイトです。

初めてインストールをするのであれば下記バージョンを見つけて実行ファイルをダウンロードしてください。

インストールバージョンのおすすめ

・Ruby+Devkit 2.6.6-1 (x64)…32ビット版のPCの場合
・Ruby+Devkit 2.6.6-1 (x86)…64ビット版のPCの場合

ご自身の使っているPCに応じて32ビットか64ビットかを選択して下さい。

実行ファイルをダウンロードしたら、ダブルクリックしてインストールします。

インストール画面は英語ですが問題はありません。

この時インストール画面に表示されている3つのチェックは付けたままにして下さい。

インストール画面

インストール確認

インストールが完了したら、先ほどのcmdでコマンドプロンプトをもう一度表示させ、もう一度「ruby -v」と入力してください。

Rubyのインストールバージョンが表示されると思います。これでインストールは完了です。

Rubyインストールバージョン

今回はRubyのプログラムを直接使う訳ではないので、インストールのみとなります。

Sassをインストール

Rubyのインストールが終了したら、次はSassをインストールします。

SassはScssを使うためのプログラムです。

インストールはコマンドプロンプトから

先ほどのコマンドプロンプトで今度は以下の様に入力します。

gem install sass

インストールコマンド

※環境によってはファイアウォールでブロックされる場合がありますので、その場合はアクセスを許可して下さい。

コマンドプロンプト上に文字が流れインストールが進んでいきます。

インストール後「sass -v」と入れると、インストールされたSassのバージョンを確認する事ができます。

これでScssを使えるようにまでなりましたね。

Koalaコンパイルソフトをインストール

次はScssファイルをcssファイルに変換するためのソフトをインストールします。

Scssは元々メタ言語なのでこのままでは使えません。cssに変換して初めて機能します。

cssに変換する事を「コンパイル」と呼びます。

コンパイルソフトを使う

コンパイルは、コマンドライン(先ほどのコマンドプロンプトの画面)で直接コマンド操作でも変換できます。

しかし今回は初心者の方が視覚確認しやすい様に、コンパイルソフトを入れて進めたいと思います。

※コマンド操作で自動コンパイルする命令もかける事ができます。

「Koala」のダウンロード

Koalaは、WindowsでもMACでも使える知名度の高いコンパイルソフトです。

下記サイトから実行ファイルをダウンロードします。

ダウンロードURL:Koala

Koala
左のDownloadボタンを押します。

ダウンロードした実行ファイルをダブルクリックしてインストールしましょう。

インストールが完了したらKoalaを起動します。

Koalaの使い方

Koalaによるコンパイル方法はいたってはシンプルです。

中央の「Drag and drop a folder to add project」のところにScssの入ったフォルダごとドラッグして落とすだけです。

Koalaの画面

ドラッグしなくても左上部のプラスマークでパソコン内のフォルダを指定する事ができますので、どちらかやりやすい方法でOKです。

フォルダ指定

フォルダ指定するとコンパイルされます

フォルダ名に日本語が含まれていると正しいファイルパスを認識することが出来ない場合があります。

選択するフォルダ名は半角英数字にしておきましょう。

フォルダを選択・ドロップすると、中に入っているscssファイルが表示されます。

scssファイルの表示

この瞬間にScssファイルとは別にcssが生成されています。実際に中身を確認してみましょう。

生成されたcssファイル
表示アイコンはお使いのCSSソフトにより変わります。

初期設定

まず初期設定を済ませましょう。左上の歯車マークをクリックします。

主な設定箇所

・一般の欄:日本語にする
・Sassの欄:Souce MAPにチェックを付ける
・Sassの欄:アウトプットスタイルを変更

Souce MAPファイル

Souce MAPにチェックを付けていると、コンパイル時に.mapというファイルも自動生成されます。

これはソースマップファイルと呼ばれ「.css.map」という拡張子になっています。

ソースマップファイル

ソースマップファイルには実際に出力された「CSSの各コードのScss内での位置」が書かれています。

scssファイルの該当箇所位置を示してくれる

このファイルを入れたままScssフォルダをサーバーにアップしておくと、Google Chromeのディベロッパーツールを使っている時に便利です。

該当箇所のスタイル設定が「元のscssファイルの何行目の設定なのか」ということを伝えてくれるのです。

Chromeデベロッパーツール

デバッグの際にcssファイルの位置を指定されても困りますよね。修正するのはScssファイルな訳ですからね。

ソースマップは同階層に置いておく

Scssのコード位置を示してくれる大変便利なファイルなので、出力されるcssファイルと同じ階層に置いておいて下さい。

設定画面でソースマップファイルの生成をやめる事もできます。

アウトプットスタイル

アウトプットスタイルは4種類ありますが、後からでも変更できますのでどれでも構いません。

アウトプットスタイル

アウトプットの種類については、アウトプット(コンパイル出力)時のスタイルについてをご覧ください。

自動コンパイル

表示された各Scssファイルをクリックすると、右にメニューが表示されます。

上段の自動コンパイルにチェックが付いているはずですので確認しておきましょう。

チェックが付いていれば、Scssファイルを更新した時に自動でコンパイルされ、cssファイルの方も更新されます。

※Koalaの画面でScssフォルダを入れている状態を維持する必要があります。

これでScssファイルを更新したら自動でコンパイルされ、cssファイルも更新される様になりましたね。

開発環境Scssと出力環境cssとを分ける

WEBサイトを一から作る場合はこのScssファイルとcssファイルの設置構成を考える必要があります。

既に他人が作っている環境を受け継ぐ場合はその環境に従うしかありません。

しかし、ゼロの環境からScssを最初から書いていくのであればやりやすい様に環境を作るべきです。

おすすめする初期の開発環境をご紹介しましょう。

scssのフォルダとcssフォルダを作る

まずは開発フォルダと出力フォルダとしてそれぞれ別々に作ります。

・scssフォルダ(開発用:.scssファイル)
・cssフォルダ(出力用:.cssファイルと.css.mapファイル)

出力ファイルについて

scssフォルダにはscssファイルのみ、cssフォルダにはコンパイル済みのcssと「.css.map」のソースマップが入る事になります。

元々からあるbootstrap.cssなどScssで作成・更新をしないファイルは、元からcssフォルダに入れてて構わないと思います。

コンパイル先の変更

Koalaの初期設定では、Scssファイルがあるフォルダと同じ位置にcssファイルを出力します。

これを別階層のcssフォルダ内に出力するように設定変更します。Scssとcssのフォルダは分けておいた方が管理しやすくなりますからね。

koala-config.jsonファイルの作成

そのためにまずはconfig.jsonファイルを作ります。以下の流れで操作をして下さい。

koala-config.jsonファイル作成方法

Scssフォルダ内にkoala-config.jsonのファイルが作成されています。

これを開いて下記の箇所を環境に合わせて変更します。

koala-config.jsonファイルの編集
srcの欄は"."、destの欄を自分の環境に合わせて変更します。

上記は../cssとして、同階層のcssを指定しています。

これでScssファイルを更新したら、同じ並び階層にあるcssフォルダ内のcssファイルが更新されるようになります。

Koalaの画面で各ファイルをクリックして右のSouce Mapにチェックを付けておけば、cssフォルダ内に.css.mapファイルも出力されるようになります。

分割したScssファイルをインポートで読み込む

次はスタイルのメインとなるstyle.cssを作ります。

一つのScssからcssへと変換するのではなく、複数のScssファイルを読み込んで一つのスタイルシートを作ります。

ジャンル別分割用サブフォルダの作成

まずScssファイル内にサブフォルダを作成します。例えば「theme」など、名前は自由です。

作成したthemeフォルダの中に

_main.scss
_nav.scss
_color.scss
_responsive.scss

等ジャンル別のScssファイルを作ります。この名前は自由ですのでやりやすい様にジャンル分けして構いません。

この時各ファイルはパーシャル(ファイル名の先頭にアンダーバー「_」をつける)をしておきます。

パーシャルしているScssファイルはコンパイルの対象になりません。

つまりこの4つのファイルは独自にcssファイルに変換されない事を意味しています。

なぜジャンルに分けるのか

一口にcssと言っても、メニュー部分やコンテンツ部分、レスポンシブの部分や色の部分など各ジャンルごとにいろいろありますよね。

各デザイン部分ごとにScssファイルとして分けておけば、更新する際にどのファイルに書いてあるのかが把握しやすくなります。

そしてcssへとコンパイルする時は複数に分けたScssを全て一つのcssファイルに出力するのです。

編集時はジャンル別に分かれたScssファイル側を編集するのですから、管理が容易になりますね。

※出力されたcss側はコード自体が長いため目的のフレーズを検索して探す必要があり、更新には向いていません。

各ジャンル別scssを読み込むstyle.scssを作成

style.scssをthemeと同じ位置に作り、ファイルを開いて以下の形でインポート指定をします。

@import'themes/main'; @import'themes/nav'; @import'themes/color'; @import'themes/responsive';

上記ではtheme内にある4つのScssファイルをインポートしています。

これでstyle.css内に、常に4つのファイル内容が一つずつ縦に連なって流し込まれるのです。

style.scssに書くのはこのインポート指定だけですので、style.scssの中にはスタイル設定は書かない事になりますね。

分割したscssファイルとそれを統合するstyle.scss

インポートの記述について

インポート指定の際、.scssの拡張子は省略できます。「_」も必要ありません。

この時themeの中の4つはパーシャルされているので個別にcssに変換はされず、4つの内容がインポートされたstyle.cssのみが変換されます。

※パーシャル「_」はコンパイルの対象外とする命令です。

これでScssとcssの初期の環境は整いました。

あとはtheme内に分けたscssファイルを書く・編集するだけですね。

まとめ

Scssによるcssの開発環境を作る流れをおさらいします。

・Rubyのインストール
・Sassのインストール
・コンパイルソフトのインストール
・コンパイル先の設定
・Scssフォルダ・cssフォルダの作成
・ジャンル別に分割したscssファイルの作成 ・集約するstyle.scssの作成

構築する際のポイント

本記事で紹介した準備作業は初めての時に一回おこなえば済む工程です。

一度構築してしまえば、RubyやSass・コンパイルソフトは既にインストールされている状態ですからね。

以降別のWEBサイトを作る場合は、新たにScssフォルダ・cssフォルダを作成して、自動コンパイルされるように設定をするだけです。

コンパイルソフトはKoalaをご紹介しましたが、他にも「Prepros」「Codekit」「Scout」などコンパイルソフトは多数あります。

自分が使いやすそうなものを調べて利用していただいて構いません。

頻繁に更新するcssのみをscssの対象とする事

Scssファイルを作成・管理するのは、常に追加や変更が予定されるメインスタイルcssが対象です。

基本フレームワークのbootstrap.cssや、フォント系css・アイコン系cssなど、ほぼ変更しないファイルはそのままcssフォルダに入れておきましょう。

決め手は分割したジャンル別scss

ジャンル別に分割するscssをどのように作るのかが、円滑な管理更新ができる決め手になります。

構築環境の変更は、分割scssファイルを追加(あるいは統合)して、インポートの記述をそれに合わせて変更するだけです。

何度でもできますので、お試しください。

この記事をシェアする

一押し人気コーナー紹介

CSS関連記事