基礎知識とか
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記法で進めてきたいと思います。