<   2013年 07月 ( 2 )   > この月の画像一覧

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 | 日記

奈良市民憲章

e0216039_1304063.jpg



e0216039_1305429.jpg



e0216039_1311372.jpg





下は大屋根工事前の市民憲章の碑


e0216039_1313536.jpg







①奈良市民憲章: 鹿鳴人のつぶやき


http://narabito.cocolog-nifty.com/blog/2007/02/post_cbe0.html


007年2月17日 (土)

奈良市民憲章





②月光院璋子の日記 奈良旅行(1)・・・行基の像と奈良市民憲章


http://gekkouinn.blog4.fc2.com/blog-entry-1697.html




大屋根の完成後「市民憲章の碑」が無い、、、、!。

と思ったら南東の隅にひっそりと壁に張り付いてました。
[PR]
by renrenshikuru | 2013-07-03 01:34 | 日記


日記


by renrenshikuru

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

以前の記事

2017年 09月
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月

最新の記事

Pale Moon 27.4..
at 2017-09-20 06:02
元山上千光寺『行者堂戸閉式』..
at 2017-09-13 06:54
「おはきつき」の拝観
at 2017-09-13 06:51
【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
奈良安全索道
at 2014-04-01 08:56

ブログジャンル

日々の出来事

画像一覧