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

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

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

rubyのインストール

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

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

sass_01

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

sass_02

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

では、コマンドプロンプトを起動して、インストールされたバージョンを確認してみます。

C:\Users\UserName>ruby -v

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

ruby 2.3.1p112 (2016-04-26 revision 54768) [x64-mingw32]

次に、Rubyのアップデートを確認します。

C:\Users\UserName>gem update --system

少々時間がかかりますが、ダダーっと表示されてアップデートが完了します。

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
  E. 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
  E. 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

Sassのインストール

最後に目的のSassをインストールします。

C:\Users\UserName\Desktop\sass>gem install sass

以下のようにインストールが完了します。

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

インストールされたSassのバージョンを確認してみます。

C:\Users\UserName\Desktop\sass>sass -v

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

Sass 3.4.22 (Selective Steve)

scssファイルのコンパイル

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

cd C:\Users\MakoUserName\Desktop>sass

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

$color-base:#ff4400;
$fontsize-base:16px;

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


p {
	strong {
	color: #FF0000;
	}
}

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

sass hoge.scss:hoge.css

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

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

p strong {
  color: #FF0000; }

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

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

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

sass --watch hoge.scss:hoge.css

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

>>> Sass is watching for changes. Press Ctrl-C to stop.

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

>>> Change detected to: hoge.scss
      write hoge.css
      write hoge.css.map

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


Sass の一覧