Sass インストール

Windows環境へのRuby、Sassのインストール手順

rubyのダウンロード

RubyInstaller for WindowsからDownloadsに移動し、 rubyinstallerの最新のexeファイル(rubyinstaller-2.0.0-p481.exe)をダウンロード。

Rubyのインストール

exeをダブルクリックし、インストーラーを起動。

インストール中に利用する言語を選択してください
「日本語」 を選択 OK

Ruby 2.0.0-p481 使用許諾契約書の同意
同意する を選択 次へ >

インストール先とオプションの指定
「C:\Ruby200」 を設定
Rubyの実行ファイルへ環境変数PATHを設定する を選択 インストール

インストール状況

Ruby 2.0.0-p481 セットアップウィザードの完了
完了

Sassのインストール

コマンドプロンプトを立ち上げ、SASSをインストール。

gem install sass

Enter

Fetching: sass-3.3.7.gem (100%) Successfully installed sass-3.3.7 Parsing documentation for sass-3.3.7 Installing ri documentation for sass-3.3.7 1 gem installed

ScssからCSS

sass input.scss output.css -t expanded

expanded指定で一般的な出力スタイル。

CSS

a:link, a:visited { color: #1546c3; text-decoration: none; } a:hover { padding: 0 0 1px 0; border-bottom: dotted 1px #5e94ca; color: #3353a7; }

CSSからScss

sass-convert -F css -T scss input.css output.scss

Scss

a { &:link, &:visited { color: #1546c3; text-decoration: none; } &:hover { padding: 0 0 1px 0; border-bottom: dotted 1px #5e94ca; color: #3353a7; } }

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。