Sass(SCSS)+Koalaを使ってみよう。導入編


Sass(SCSS)を使ってみよう。導入編

CSSプリプロセッサーを知って数年。

SassLESSか・・・

Rubyのインストール..コマンドライン..コンパイル..なんか面倒・・CSS3だってろくに覚えてない・・・

そんな風に思ってきたけどやっぱり便利な方がいいし、今時知らないと・・みたいになってきたので。

LESSはSassの機能限定版?みたいな感じのJacascriptベース(SassはRubyベース)で記述もCSSとほぼ同じで覚えやすそうですが、それはSCSSでも同じだし、なによりSass(SCSS)で使えるCompass(Sassを更に便利に使いやすくするためのフレームワーク的なもの)に興味深々。
それとBootstrap3ではLESS・Sass(SCSS)を使っていて、Bootstrap4からはSass(SCSS)になったので、この際Sass(SCSS)を覚えていこうと決心。

ということで、まずはSass(SCSS)を使うための導入をしてみよう。

 

ここで行う導入の流れ(おそらくもっとも簡単な方法)

  1. Rubyのダウンロード/インストールと確認
    (これがないとSass使えない。Macは最初からインストールされいる)
  2. Koalaのダウンロード/インストールと日本語化
    (SassとかLESSとかCoffeeScriptとか自動でコンパイルしてくれる魔法のソフト。しかもCompass内蔵。WinもMacもOK)
  3. 動作チェック

 

Sass.SCSSの導入

Sass(サス、Syntactically Awesome Stylesheets)とは?

  • Sass記法であり、拡張子は「.sass」。
  • CSSを効率よく記述することができる言語で以下の特徴がある。
  • 変数による使いまわしが出来る。
  • セレクタのネスト化でスッキリ見やすく出来る。
  • MIXINで定義したまとまったスタイルを呼び出して使える。

他にもいろいろCSSでは出来ないことが出来る機能が沢山。

また、SCSS(Sassy CSS)とは、SCSS記法であり、拡張子は「.scss」。Sass記法よりCSSの記述に近くCSS3と高い互換性がある。SCSSにCSSを記述しても認識してくれる。

2つの記法があり、現在の主流はSCSSである。

Sass(SCSS)の導入

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

*Macはインストールされているためこの手順は不要。

RubyInstallerからセットアップファイルをダウンロードする。

赤いDownloadボタンをクリック。

sass-ruby-ダウンロード

自分のPCが64ビットなので今回はRuby2.2.3(x64)をダウンロードしてインストールしてみます。

sass-ruby-インストール

ダウンロードした「rubyinstaller-2.2.3-x64.exe」を実行。

日本語が選択されているのを確認して「OK」を押す。

sass-ruby-install

使用許諾契約書の同意画面は同意するのチェックして「次へ(N)>」を押す。

sass-ruby-insatall

インストール先とオプションの指定画面では

以下2つの項目にチェックを入れて「インストール)(I)」を押す

  • Rubyの実行ファイルへ環境変数PATHを設定する
  • .rb と .rbw ファイルをRubyに関連づける

sass-ruby-install

完了。あっというまです。

scss-ruby-install

完了を押したら本当にインストールされているかコマンドプロンプトを用いて確認しておきます。

実行手順

[すべてのプログラム]→[アクセサリ]→[コマンドプロンプト]と選択。

または

検索ボックスに「cmd」と入力してEnterキーを押してみて下さい。

コマンドプロンプトの黒い画面が現れたら以下コマンドを入力。

ruby -v と入力。rubyと-vの間は半角スペースを忘れずに。

インストールされていればRubyのバージョンが表示されます。

sass-ruby-install

 

STEP2 Koalaのダウンロード/インストールと日本語化

次にKoalaのダウンロードをします。

KoalaはSassとかLESSとかCoffeeScriptとか自動でコンパイルしてくれる魔法のソフト。しかもCompass内蔵。WinもMacもOKです。

他にもGUIソフトはいくつかありますが名前が良かったので。。w

では、Koalaのダウンロードです。

http://koala-app.com/の緑色Downloadボタンを押す。

Koala-install

次画面でもDownloadを押す

koala-install

次画面もダウンロードで・・・

koala-install

ダウンロード出来たら「koala_2.0.4_setup.exe」を実行します。

Setup Wizard が表示されたら Next > を押す。

koala-install

インストールフォルダの設定画面、問題なければ Next > を押す。

koala

スタートメニューにフォルダー作成画面、問題なければ Next > を押す。

koalaインストール

デスクトップにアイコン作るか聞かれるのでお好みで Next > を押す。

koalaインストール

確認して間違いなければ Install ボタンを押す。

koalaインストール

インストールが完了、 Finish ボタンを押す。

koala

インストールは以上!

Koalaを起動してみます。(Launch koalaにチェック入れた場合は自動で起動)

日本語化するため、左上の歯車アイコンを押す。

koala使い方

Generalタブ – Language:のプルダウンから日本語を選択してOKボタンを押す。

koala設定

Koalaを再起動。日本語化になっているのを確認。

Koalaのインストールは以上で終了。

 

STEP3 動作確認

実際にSCSSからCSSに変換されるか試してみます。

適当な場所にフォルダを作り、その中にtest.scssファイルを作成。

フォルダごとKoalaの画面にドラッグアンドドロップします。

sass-scss-koala

ドラッグアンドドロップした時点ですでにフォルダ内には自動で「test.css」が出来ていました。

koala

Koalaの画面、右側に「test.scss」ファイルが表示されるのでクリックしてみます。

クリックすると右側にメニューが表示される。

sass-koala-使い方

右側のチェックボックスは必要な個所にチェックを入れましょう。

自動コンパイル:Koalaを起動しておくと作業フォルダ内で.scssに更新があったとき自動で.cssを書き出してくれる。(必須)

オプションについて

  • Compass Mode : Compassフレームワークを使うかどうか。
  • Source Map : /*# sourceMappingURL=test.css.map */ 最終行にcssのアドレス付与するかどうか。
  • Line Comments : /* line 4, test.scss */ のようにラインごとにコメントをいれるかどうか。
  • Debug Info : @media -sass-debug-info のデバッグタグをいれるかどうか。
  • Unix New Line : Unixコードにするかどうか。
  • Autoprefix : ベンダープレフィックスを付けるかどうか。

アウトプットスタイルについて

  • nested : 入れ子にするスタイル。
  • expanded : 読みやすいスタイル。
  • compact : 一行にしたスタイル。
  • compressed : minify(改行などをなくし軽量化)したスタイル。

今回は scss ファイルが正常に css に変換されるか試したいので、scss ファイルに以下のように記述してみます。
「自動コンパイル」にチェックあり。オプションは使用せず。
アウトプットスタイルのプルダウンから Expanded を選択。

上記の .scss を保存すると自動で css ファイルが書き出され、正常に動く事を確認。

出来上がったcssファイル。

これでSass(SCSS)が使える環境が整えました。

Sass(SCSS)+Koala便利ですね。

 


この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

  1. […] Sass(SCSS)+Koalaを使ってみよう。導入編 […]

トラックバック URL