Windows PC に Ruby と Sass を導入する方法

e0216039_658466.jpg





Windows PC に Ruby と Sass を導入する方法




http://www.hamashun.me/archives/1294573.html




①Rubyのインストール
SassはRubyで動いているので、まずはRubyをインストールします。 RubyInstaller for Windows を使えば、何度かクリックするだけで完了します。





インストールが終了したらコマンドプロンプトを起動して、次のコマンドを入力してエンターをッターンと叩いてください。

ruby -v


②gemのアップデート



念のため、

gem update --system
と打ってエンターを押して、gemをアップデートしておきます。 よく分からなくてもとりあえずやっておけば良さそう。

Sassのインストール
そのまま続けて、次のコマンドを叩きます。

gem install haml
gem install sass

これでSassはインストール完了です。
Rubyのインストールさえ済めば、Sass自体はあっと言う間にインストールできます。

2011-06-08 追記:Sass が Haml から分離したので、コマンドが変わったぽいです

参考:Sass(CSS拡張メタ言語)に関す資料 - NAVER まとめ


③Sassを試す

Sassを試す
ところで、コマンドプロンプトの行頭の表示は恐らく、

C:\Document and Settings\Owner
とかそんな感じになってるんじゃないでしょうか。 その場所をエクスプローラで開きます。

そこに、いつも使っているエディタでtest.scss というファイルを作成し、次の内容を記述します。

$red: #f00;
$blue: blue;

html {
background: $red;
body {
background: $blue;
}
}
保存をしたら、コマンドプロンプトで次のコマンドを叩きます。

sass test.scss test.css
C:\Document and Settings\Owner のフォルダを見てみてください。 test.css というファイルができているはずです。 それをいつものエディタで開くと、

html {
background: red;
}
html body {
background: blue;
}
となっていると思います(閉じカッコの位置とか微妙に違うかも)。
これで、Sassを使う事ができました。





※注意点


ファイルの文字コードはUTF8、改行コードはLFにしておいた方が無難らしいです。

あとは、Sassで.scssライフを満喫するだけです。

すぺしゃるさんくす
この記事は、うどん好きで有名な@faultierさんのおかげで作成できました!

「CSS」カテゴリの最新記事
書評:Sass入門 より効率的なCSSコーディング
meter要素のフォールバックサンプル
Sassのサンプルコード
Windows PC に Ruby と Sass を導入する方法
HTML5で最近使っているリセットCSS





e0216039_7261585.jpg




e0216039_7263079.jpg



e0216039_7264771.jpg



Rubyで「hello world」と表示するプログラムを実行



e0216039_8451816.jpg

[PR]
by renrenshikuru | 2013-07-30 06:58 | 日記


日記


by renrenshikuru

プロフィールを見る
画像一覧

以前の記事

2017年 11月
2017年 09月
2017年 08月
2016年 11月
2016年 10月
2015年 09月
2015年 02月
2014年 09月
2014年 04月
2013年 11月
2013年 09月
2013年 08月
2013年 07月
2013年 06月
2013年 05月
2013年 04月
2013年 03月
2011年 11月

最新の記事

喫茶 みりあむ
at 2017-11-19 06:38
JR3YOC 大和万葉ハム..
at 2017-11-07 18:37
軽快に動作する圧縮・解凍ソフ..
at 2017-09-09 05:34
Windowsのプロダクトキ..
at 2017-08-20 07:24
【Windows 10】DV..
at 2016-11-15 00:00
Windows10 アップデ..
at 2016-10-19 19:54
インストールされた更新プログ..
at 2016-10-10 06:23
Windows 10 ショー..
at 2016-10-07 19:14
Windows10 PC起動..
at 2016-10-07 19:02
Windows 10 ISO..
at 2016-10-05 22:24
超便利!Windows10に..
at 2016-10-05 18:22
Windows10の Win..
at 2016-10-05 06:51
山崎製パン「ランチパック」「..
at 2015-09-28 19:02
マーガリンの危うさ
at 2015-02-04 07:25
『ホツマツタヱ』を読み解く―..
at 2014-09-23 08:40

ブログジャンル

日々の出来事

画像一覧