Sassを使ってみた(Windows)

sass-header

何かと今Hotな(そんなことを思っているのはわたしだけかもしれませんが)、Sassを使ってみました。
Sassは、CSSの拡張版のようなもので、プログラムのように演算や変数を使用したり、入れ子記述ができたりなんだりします。とにかくスマートなもの!なのだという認識です。

わたしは、普段、Windows環境で作業してますので、Windowsでの構築手順(わたしがやったこと)をご紹介します!

  1. Rubyをインストール
  2. Sassをインストール
  3. Koalaをインストール
  4. Dreamweaverの環境設定
  5. 実際に使ってみた

1.Rubyをインストール

ruby

Macでは標準装備らしいのですが、Windowsには入っていないのでインストールします。

http://rubyinstaller.org/downloads/

最新版をダウンロードしてインストールしてください。
インストールの際、オプションの「Rubyの実行ファイルへ環境変数PATHを設定する」にチェックを入れておきます。

コマンドプロンプトで、

%ruby -v

と打って、Rubyのバージョンが表示されればインストールが完了しています!
command


2.Sassをインストール

そのまま、コマンドプロンプトで作業を行います。

文字コードを指定

Windowsでは、文字コードがShift_JISに設定されているので、UTF-8に指定し直します。

%set LANG=ja_JP.UTF-8

RubyGemsを更新

Rubyに付属している、RubyGemsを更新します。

%gem update --system

RubyGemsからSassをインストール

わたしの場合は、なかなかインストールが始まりませんでしたが、気長に待つとインストールが完了します!

%gem install sass

3.Koalaをインストール

koala

こちらのサイトからダウンロードして、インストールを行います。

http://koala-app.com/


4.Dreamweaverの環境設定

コーディングは全てDreamweaverを使用しているわたしなので、Dreamweaverの環境設定は外せません。拡張子の情報を認識させたり、コードヒントが出るようにします。

拡張子の認識

Dreamweaverを開いて、[編集]→[環境設定]→[ファイルタイプ/エディター]の「コードビューで開く」に”.scss”を追記します。

コードヒントが出るようにする

Dreamweaverがのインストールディレクトリ内の、”configuration/DocumentTypes”の中にある、MMDocumentTypes.xmlファイルを以下のように書き換えます。

<documenttype id="CSS" internaltype="Text" winfileextension="css" macfileextension="css" file="Default.css" writebyteordermark="false" mimetype="text/css" >

この部分を

<documenttype id="CSS" internaltype="Text" winfileextension="css,scss" macfileextension="css,scss" file="Default.css" writebyteordermark="false" mimetype="text/css" >

このように書き換えます。


5.実際に使ってみた

testというディレクトリを任意の場所に作成し、その中にstyle.scssというファイルを作成します。
Koalaを立ち上げ、testフォルダをそのままドラッグ&ドロップします。

scss

style.scssファイルをDreamweaverで開き、以下のコードを記述し(入れ子にしてみました!)、保存します。

#header-wrapper {
	width:100%;
	height:55px;
	margin-bottom:20px;	
	#header {
		width:800px;
		height:50px;
		margin:0 auto;
		padding-bottom:10px;
	}
}

すると、testフォルダ内に自動でstyle.cssというファイルが生成され、cssが吐き出されています。

#header-wrapper {
  width: 100%;
  height: 55px;
  margin-bottom: 20px;
}
#header-wrapper #header {
  width: 800px;
  height: 50px;
  margin: 0 auto;
  padding-bottom: 10px;
}

入れ子の他にも、変数指定や、演算子など様々な機能が使えます。やりながら要領をつかむしか無いので、これからどんどん使っていきたいと思います!


参考

お世話になりました!!m(_ _)m

WindowsでSass環境を構築(Qiita [キータ] – プログラマの技術情報共有サービス)
これからSassを始めたい人へ!導入手順をまとめてみた(Dreamweaver対応)(株式会社LIG)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です