ひとり勉強ログ

ITエンジニアの勉強したことメモ

Windows版はじめてのSass（scss）-コマンドプロンプトでコンパイルする方法

Sass

WindowsでSassをインストールし、コマンドプロンプトを使用してコンパイルする方法を紹介します。

「コマンドプロンプトの黒い画面は嫌い！」という方も、「物は試し」と言いますのでぜひやってみてください。

rubyのインストール

まずはコンパイルさせるためのプログラム「ruby」をこちらからダウンロードします。

ダブルクリックすると以下の画面が表示されますので、「Ruby の実行ファイルへ環境変数 PATH を設定する」にチェックを入れて「インストール」を押下して進んでください。

sass_01

以下の画面が表示されればインストール完了です。

sass_02

コマンドプロンプトでさらに設定

では、コマンドプロンプトを起動して、インストールされたバージョンを確認してみます。 [bash] C:\Users\UserName>ruby -v [/bash]

以下のようにインストールされたバージョンが表示されます。 [bash] ruby 2.3.1p112 (2016-04-26 revision 54768) [x64-mingw32] [/bash]

次に、Rubyのアップデートを確認します。 [bash] C:\Users\UserName>gem update --system [/bash]

少々時間がかかりますが、ダダーっと表示されてアップデートが完了します。 [bash] Updating rubygems-update Fetching: rubygems-update-2.6.6.gem (100%) Successfully installed rubygems-update-2.6.6 Parsing documentation for rubygems-update-2.6.6 Installing ri documentation for rubygems-update-2.6.6 Installing darkfish documentation for rubygems-update-2.6.6 Done installing documentation for rubygems-update after 123 seconds Parsing documentation for rubygems-update-2.6.6 Done installing documentation for rubygems-update after 0 seconds Installing RubyGems 2.6.6 RubyGems 2.6.6 installed Parsing documentation for rubygems-2.6.6 Installing ri documentation for rubygems-2.6.6

=== 2.6.6 / 2016-06-22

Bug fixes:

  • Sort installed versions to make sure we install the latest version when running gem update --system. As a one-time fix, run gem update --system=2.6.6. Pull request #1601 by David Radcliffe.

=== 2.6.5 / 2016-06-21

Minor enhancements:

  • Support for unified Integer in Ruby 2.4. Pull request #1618 by SHIBATA Hiroshi.
  • Update vendored Molinillo to 0.5.0 for performance improvements. Pull request #1638 by Samuel Giddins.

Bug fixes:

  • Raise an explicit error if Signer#sign is called with no certs. Pull request #1605 by Daniel Berger.
  • Update update_bundled_ca_certificates utility script for directory nesting. Pull request #1583 by James Wen.
  • Fix broken symlink support in tar writer (+ fix broken test). Pull request #1578 by Cezary Baginski.
  • Remove extension directory before (re-)installing. Pull request #1576 by Jeremy Hinegardner.
  • Regenerate test CA certificates with appropriate extensions. Pull request #1611 by rhenium.
  • Rubygems does not terminate on failed file lock when not superuser. Pull request #1582 by Ellen Marie Dash.
  • Fix tar headers with a 101 character name. Pull request #1612 by Paweł Tomulik.
  • Add Gem.platform_defaults to allow implementations to override defaults. Pull request #1644 by Charles Oliver Nutter.
  • Run Bundler tests on TravisCI. Pull request #1650 by Samuel Giddins.

=== 2.6.4 / 2016-04-26

Minor enhancements:

  • Use Gem::Util::NULL_DEVICE instead of hard coded strings. Pull request #1588 by Chris Charabaruk.
  • Use File.symlink on MS Windows if supported. Pull request #1418 by Nobuyoshi Nakada.

Bug fixes:

  • Redact uri password from error output when gem fetch fails. Pull request

    1565 by Brian Fletcher.

  • Suppress warnings. Pull request #1594 by Nobuyoshi Nakada.
  • Escape user-supplied content served on web pages by gem server to avoid potential XSS vulnerabilities. Samuel Giddins.

=== 2.6.3 / 2016-04-05

Minor enhancements:

  • Lazily calculate Gem::LoadError exception messages. Pull request #1550 by Aaron Patterson.
  • New fastly cert. Pull request #1548 by David Radcliffe.
  • Organize and cleanup SSL certs. Pull request #1555 by James Wen.
  • [RubyGems] Make deprecation message for paths= more helpful. Pull request #1562 by Samuel Giddins.
  • Show default gems when using "gem list". Pull request #1570 by Luis Sagastume.

Bug fixes:

  • Stub ordering should be consistent regardless of how cache is populated. Pull request #1552 by Aaron Patterson.
  • Handle cases when the @@stubs variable contains non-stubs. Pull request

    1558 by Per Lundberg.

  • Fix test on Windows for inconsistent temp path. Pull request #1554 by Hiroshi Shirosaki.
  • Fix Gem.find_spec_for_exe picks oldest gem. Pull request #1566 by Shinichi Maeshima.
  • [Owner] Fallback to email and userid when owner email is missing. Pull request #1569 by Samuel Giddins.
  • [Installer] Handle nil existing executable. Pull request #1561 by Samuel Giddins.
  • Allow two digit version numbers in the tests. Pull request #1575 by unak.

=== 2.6.2 / 2016-03-12

Bug fixes:

  • Fix wrong version of gem activation for bin stub. Pull request #1527 by Aaron Patterson.
  • Speed up gem activation failures. Pull request #1539 by Aaron Patterson.
  • Fix platform sorting in the resolver. Pull request #1542 by Samuel E. Giddins.
  • Ensure we unlock the monitor even if try_activate throws. Pull request

    1538 by Charles Oliver Nutter.

=== 2.6.1 / 2016-02-28

Bug fixes:

  • Ensure default_path and home are set for paths. Pull request #1513 by Aaron Patterson.
  • Restore but deprecate support for Array values on Gem.paths=. Pull request #1514 by Aaron Patterson.
  • Fix invalid gem file preventing gem install from working. Pull request

    1499 by Luis Sagastume.

=== 2.6.0 / 2016-02-26

Minor enhancements:

  • RubyGems now defaults the gem push to the gem's "allowed_push_host" metadata setting. Pull request #1486 by Josh Lane.
  • Update bundled Molinillo to 0.4.3. Pull request #1493 by Samuel E. Giddins.
  • Add version option to gem open command. Pull request #1483 by Hrvoje Šimić.
  • Feature/add silent flag. Pull request #1455 by Luis Sagastume.
  • Allow specifying gem requirements via env variables. Pull request #1472 by Samuel E. Giddins.

Bug fixes:

  • RubyGems now stores gem push credentials under the host you signed-in for. Pull request #1485 by Josh Lane.
  • Move coding location to first line. Pull request #1471 by SHIBATA Hiroshi.
  • [PathSupport] Handle a regexp path separator. Pull request #1469 by Samuel E. Giddins.
  • Clean up the PathSupport object. Pull request #1094 by Aaron Patterson.
  • Join with File::PATH_SEPARATOR in Gem.use_paths. Pull request #1476 by Samuel E. Giddins.
  • Handle when the gem home and gem path arent set in the config file. Pull request #1478 by Samuel E. Giddins.
  • Terminate TimeoutHandler. Pull request #1479 by Nobuyoshi Nakada.
  • Remove redundant cache. Pull request #1482 by Eileen M. Uchitelle.
  • Freeze Gem::Version@segments instance variable. Pull request #1487 by Ben Dean.
  • Gem cleanup is trying to uninstall gems outside GEM_HOME and reporting an error after it tries. Pull request #1353 by Luis Sagastume.
  • Avoid duplicated sources. Pull request #1489 by Luis Sagastume.
  • Better description for quiet flag. Pull request #1491 by Luis Sagastume.
  • Raise error if find_by_name returns with nil. Pull request #1494 by Zoltán Hegedüs.
  • Find_files only from loaded_gems when using gemdeps. Pull request #1277 by Michal Papis.

=== 2.5.2 / 2016-01-31

Bug fixes:

  • Fix memoization of Gem::Version#prerelease? Pull request #1125 by Matijs van Zuijlen.
  • Handle trailing colons in GEM_PATH, by Damien Robert.
  • Improve the Gemfile gemspec method, fixing #1204 and #1033. Pull request

    1276 by Michael Papis.

  • Warn only once when a gemspec license is invalid. Pull request #1414 by Samuel
    1. Giddins.
  • Check for exact constants before using them, fixing Ruby bug #11940. Pull request #1438 by Nobuyoshi Nakada.
  • Fix building C extensions on Ruby 1.9.x on Windows. Pull request #1453 by Marie Markwell.
  • Handle symlinks containing ".." correctly. Pull request #1457 by Samuel E. Giddins.

Minor enhancements:

  • Add --no-rc flag, which skips loading .gemrc. Pull request #1329 by Luis Sagastume.
  • Allow basic auth to be excluded from allowed_push_host. By Josh Lane.
  • Add gem list --exact, which finds gems by string match instead of regex. Pull request #1344 by Luis Sagastume.
  • Suggest alternatives when gem license is unknown. Pull request #1443 by Samuel
    1. Giddins.
  • Print a useful error if a binstub expects a newer version of a gem than is installed. Pull request #1407 by Samuel E. Giddins.
  • Allow the (supported) s3:// scheme to be used with --source. Pull request

    1416 by Dave Adams.

  • Add --[no-]post-install-message to install and update. Pull request #1162 by Josef Šimánek.
  • Add --host option to yank, providing symmetry with pull. Pull request

    1361 by Mike Virata-Stone.

  • Update bundled Molinillo to 0.4.1. Pull request #1452 by Samuel E. Giddins.
  • Allow calling build without '.gemspec'. Pull request #1454 by Stephen Blackstone.
  • Add support for source option on gems in Gemfile. Pull request #1355 by Michael Papis.
  • Function correctly when string literals are frozen on Ruby 2.3. Pull request

    1408 by Samuel E. Giddins.

=== 2.5.1 / 2015-12-10

Bug fixes:

  • Ensure platform sorting only uses strings. Affected binary installs on Windows. Issue #1369 reported by Ryan Atball (among others). Pull request #1375 by Samuel E. Giddins.
  • Revert PR #1332. Unable to reproduce, and nil should be impossible.
  • Gem::Specification#to_fullpath now returns .rb extensions when such a file exists. Pull request #1114 by y-yagi.
  • RubyGems now handles Net::HTTPFatalError instead of crashing. Pull request #1314 by Samuel E. Giddins.
  • Updated bundled Molinillo to 0.4.0. Pull request #1322, #1396 by Samuel E. Giddins.
  • Improved performance of spec loading by reducing likelihood of loading the complete specification. Pull request #1373 by Aaron Patterson.
  • Improved caching of requirable files Pull request #1377 by Aaron Patterson.
  • Fixed activation of gems with development dependencies. Pull request #1388 by Samuel E. Giddins.
  • RubyGems now uses the same Molinillo vendoring strategy as Bundler. Pull request #1397 by Samuel E. Giddins.
  • Fixed documentation of Gem::Requirement.parse. Pull request #1398 by Juanito Fatas.
  • RubyGems no longer warns when a prerelease gem has prerelease dependencies. Pull request #1399 by Samuel E. Giddins.
  • Fixed Gem::Version documentation example. Pull request #1401 by Guilherme Goettems Schneider.
  • Updated documentation links to https://. Pull request #1404 by Suriyaa Kudo.
  • Fixed double word typo. Pull request #1411 by Jake Worth.

RubyGems installed the following executables: C:/Ruby23-x64/bin/gem

Ruby Interactive (ri) documentation was installed. ri is kind of like man pages for ruby libraries. You may access it like this: ri Classname ri Classname.class_method ri Classname#instance_method If you do not wish to install this documentation in the future, use the --no-document flag, or set it as the default in your ~/.gemrc file. See 'gem help env' for details.

RubyGems system software updated [/bash]

Sassのインストール

最後に目的のSassをインストールします。 [bash] C:\Users\UserName\Desktop\sass>gem install sass [/bash]

以下のようにインストールが完了します。 [bash] Fetching: sass-3.4.22.gem (100%) Successfully installed sass-3.4.22 Parsing documentation for sass-3.4.22 Installing ri documentation for sass-3.4.22 Done installing documentation for sass after 44 seconds 1 gem installed [/bash]

インストールされたSassのバージョンを確認してみます。 [bash] C:\Users\UserName\Desktop\sass>sass -v [/bash]

以下のようにインストールしたバージョンが表示されればOKです。

[bash] Sass 3.4.22 (Selective Steve) [/bash]

scssファイルのコンパイル

ではテストでコンパイルを行ってみます。 デスクトップに「sass」というフォルダを作成、コマンドプロンプトでそのフォルダまで移動します。

[bash] cd C:\Users\MakoUserName\Desktop>sass [/bash]

「sass」フォルダ内に「hoge.scss」というファイルを作成、下記のように記述し保存します。

[css] $color-base:#ff4400; $fontsize-base:16px;

body{ color: $color-base; font-size: $fontsize-base; }

p { strong { color: #FF0000; } } [/css]

「hoge.scss」をコンパイルして「hoge.css」にします。

[bash] sass hoge.scss:hoge.css [/bash]

「hoge.css」と「hoge.css.map」というファイルが生成され、「hoge.css」では以下のようにCSSが記述されていると思います。

[css] body { color: #ff4400; font-size: 16px; }

p strong { color: #FF0000; }

/# sourceMappingURL=hoge.css.map / [/css]

これでコンパイルができました。

さらに「scss」ファイルを保存するたびに、内容を「css」ファイルに反映させるには以下のコマンドを実行します。

[bash] sass --watch hoge.scss:hoge.css [/bash]

実行すると以下のように表示されます。

[bash] >>> Sass is watching for changes. Press Ctrl-C to stop. [/bash]

「hoge.scss」ファイルに修正を加えると、修正内容を検出して「hoge.css」ファイルに即時反映されます。

[bash] >>> Change detected to: hoge.scss write hoge.css write hoge.css.map [/bash]

即時反映を止めるには「Ctrl-C」を押下するだけです。「Y」を選択すれば終了します。

[bash] バッチ ジョブを終了しますか (Y/N)? [/bash]

いかがでしたでしょうか。scssファイルをコンパイルする方法は他にもありますが、コマンドプロンプトでもこんなに簡単に実行できます。

黒い画面が苦手という方も、これを機会にコマンドプロンプトに触れてみてはいかがでしょうか。