すたらブログ

文系Webプログラマの備忘録

WindowsでSass(SCSS)を使う準備

最終更新: 2017-09-28
Ruby2.4以降は面倒な設定が不要になりました。

目次


環境


Rubyをインストール

古いRubyがある場合はあらかじめアンインストールしておいてください。
下記から最新のRubyを入手します。

🔗 http://rubyinstaller.org/downloads/

インストールで気をつけるのは、下記にチェックを入れることです。

f:id:sutara_lumpur:20170928144237p:plain

ウィザードの最後に、「引き続きMSYS2をインストールする」という項目にチェックが入っていますが、これは外します。
私にはPowerShellやGitBashで十分なので…。

f:id:sutara_lumpur:20171002143650p:plain

インストールの確認のため、PowerShellで下記のコマンドを実行します。
Rubyのバージョンが表示されれば成功です。

> ruby -v
ruby 2.4.2p198 (2017-09-14 revision 59899) [x64-mingw32]

次に、Rubyの外部エンコーディングUTF-8になっていることを確認します。

> ruby -e "puts Encoding.default_external"
UTF-8

下記のようにWindows環境変数を直接確認してもかまいません。

f:id:sutara_lumpur:20170928151001p:plain

🔗 WindowsでEncoding.default_externalをUTF-8にするには - すがブロ


RubyGemsの更新を確認する

現在のバージョンを確認します。

> gem -v
2.6.13

更新がないかを確認します。

> gem update --system
Latest version currently installed. Aborting.

🔗 初心者は覚えておきたいRubygemsのコマンドまとめ - Qiita


Sassをインストール

> gem install sass

確認します。

> sass -v
Sass 3.5.1 (Bleeding Edge)

🔗 http://sass-lang.com/install


試しにSassからCSSコンパイルする

試しに、Sassの公式サイトに載っているコードに日本語のコメントも追加してコンパイルします。
SASS構文とSCSS構文、どちらでもかまいません。

📄 test.scss

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

/* 日本語のコメント */

body {
  font: 100% $font-stack;
  color: $primary-color;
}

PowerShellで下記を実行します。
何もエラーが表示されなければ成功です。

> sass test.scss:test.css

下記のようなCSSが出力されるはずです。

📄 test.css

@charset "UTF-8";
/* 日本語のコメント */
body {
  font: 100% Helvetica, sans-serif;
  color: #333; }

/*# sourceMappingURL=test.css.map */

🔗 http://sass-lang.com/guide