お寿司か焼き肉食べたい

まじめな事からしょーもない事まで
めにゅーを開く(投げやり)

基礎知識とか

Sassとは

正式名称は「Syntactically Awesome StyleSheet」
発音とかよう分からんね。(福本豊風に)
Sassでいいです。
CSSって人それぞれだったりなんやらで、まぁ面倒だったり無駄があったりって事も多々あるようで。
それらをプログラム的に置き換えて無駄を排除しようと考えられたのがSassなんですって

で、どうなんのさ

Sassってブラウザに組み込まれているものでもないし、最終的にはいつものcssになります
つまり、ある程度まとめて設計してCSSを無駄なく作っちゃおうぜってのがSassなんですって
[Sass]→[コンパイラ]→[CSS]
基本この流れです。

【コンパイルエラーが発生しました】

javaとかC#とかやってる人はピンとくるコンパイル。
まぁ、ブラウザが認識する為にCSS形式にコンパイルするってのが必要になるわけです。
流れはこんなもんですね。

Sassを使えるようにするには?(windows編)

Macの方には申し訳ないと思っている(建前)
では、Sassを使えるようにしていきましょう。

Rubyのインストール

Rubyをインストールする必要があります。
Ruby?は別途ググってください(*゚∀゚)
インストールはRubyInstaller for windowsから

DL後そのままサクサクとインストールを実行してほしいのですが
インストーラのオプションが3つあるので、「環境変数のPATHに通す設定」にチェックを入れる。
忘れずに行ってくださいね。

Rubyインストールできたっぽい?

はーい。コマンドプロンプト立ち上げてー
ruby -v
これをカチャカチャ・・・ッターン!ってしてRubyのバージョンがでればインストール完成です。

Sassのインストール

では続いて、Sassをインストールしましょう。
ちなみにインストーラーのDLはもういりません。Rubyに付属している
パッケージ管理ソフトの RubyGemsってのを使ってコマンドだけでペペッとインストールしましょう

その前に、文字コードの指定を行う必要があります。現在 Shift-JISになっているので UFT-8に変換してあげます。
set LANG=ja_JP.UTF-8

お次は、RubyGemsを最新版に更新
別になくてもいいとは思いますが、一応ね。
gem update --system

で、最後にSassをインストールしちゃいましょう。
gem install sass

ここまで終わったら
sass -v

これで、Sassバージョンがでればおっけー(*゚∀゚)
インストール時間はおよそ5分。早いね

書き方。ちょっとだけ。複数種類あるそうなんだす。

複数やと!・・・

いや、SassなんだからSassだろみたいな感じですが。
SASS記法、SCSS記法の2種類が存在しています。

SASS記法 SCSS記法の主な違い

波括弧{} セミコロン : の後に半角スペース ミックスイン インクルード 拡張子
SCSS記法 必要 必要 不要 @mixin @include .scss
SASS記法 不要(半角スペース2文字のインデントでブロックを表す) 不要 必要 = + .sass
CSS(いつものCSS) 必要 必要 不要 なし なし .css

というわけで並べてみました。
パッと見、SCSSのほうがCSSにより近い記述方法のようです。
(SASSが分かりにくいとは言っていない)
なので、以降は、SCSS記法で進めてきたいと思います。