Sassの勉強 #01 Sassとは何か？～環境構築

Sassの勉強 #01　Sassとは何か？～環境構築

2015年1月23日 10:11

私の参考書籍・参考サイト

まず最初に今回の学習に関して私が参考にしている書籍とサイトを紹介します。前回の記事にも書いたのですが、「Sassの勉強記事だけ読みたいんや、という方は是非次の投稿記事へお進みください」とか書いたのでもっかいちゃんと紹介しておきます。

書籍。私はこの本を買いました。

>>Web制作者のためのSassの教科書これからのWebデザインの現場で必須のCSSメタ言語

本当にこの本は「教科書」です。記事では書かないであろう細かい詳細もその本では解説されているので、興味のある方は是非一度は読んで頂きたい(*´ω｀*)サポートサイトも充実しています。

>>Web制作者のためのSassの教科書 – 公式サポートサイト

参考サイトとしては、動画で学習ができる「ドットインストール」にSass/SCSS入門のレッスンがあります。こちらもとてもわかりやすく理解が進みます。

>>Sass/SCSS入門 (全15回) – プログラミングならドットインストール

あと教科書の著者の平澤さんのサイト「CSS HappyLife」でも学習用にとても良い連載記事が投稿されています。

>>【Sassを覚えよう！】もくじ的なのと参考リンク – CSS HappyLife

まず教科書を一通り読みました。概要をつかみました。教科書とサイトを見ながら記事をノート代わりに書く…っていう流れで勉強していくつもりです。

Sassとは何か？

Sassの読み方は「サス」。CSSを拡張したメタ言語。
つまりSassはCSSをもっと便利に楽に書く事が出来る拡張言語。

コードの再利用、変数の使用、演算処理、条件分岐など、CSSでは出来ない事も出来るすごい奴。

>>Sassの公式サイト　Sass: Syntactically Awesome Style Sheets

ファイル拡張子の決まりごと

SassはCSSの拡張言語だけれども、普通のCSSとは構文が異なるのでCSSファイルに直接Sassを記述は出来ない。そのため、拡張子を「.css」ではなく「.scss」としてファイルを用意してそこに書いていく。

Sassだけどファイルの拡張子は「.scss」←覚える。

実はSassの記法には２種類あり、拡張子が「.sass」のものもある。でも今やるのは「.scss」の方。「SASS記法(.sass)」の方が古くて「SCSS記法(.scss)」の方が新しい。2つの記法には大きな違いがあったりCSSとの互換性の有無も違う。とりあえず今やるのは「.scss」の方。故に「.sass」の方の事は忘れることにする。（詳しくはSassの教科書のP.15に載っていました。ドットインストールのSass/SCSS入門 #01でも紹介されていました）

以後このブログでSassって書いたら「SCSS記法(.scss)」の方を指します。

CSSとの互換性

SassはCSSと互換性がある。
CSSファイルの拡張子を .scss に変更するだけでもSassファイルとなる。（Sassの機能を使わないと意味はないけれども）

Sassファイルをブラウザで認識させるために

Sassファイルはそのままではブラウザが認識できない。故にSassファイルをCSSファイルにコンパイルする必要がある。

コンパイルするために必要な事は「Ruby」と「Sass」のインストール。
その辺りは後述。

SassファイルはCSSファイルにコンパイルして利用する！

Sassの機能

Sassの機能についてですが、マイバイブル「Sassの教科書」にキレイにまとまっていたので各機能についての見出しだけ引用させて頂きます。

記述の簡略化が出来る。
専用のコメントが使える。
同じ値を使いまわすことができる。
四則演算が使える。
一度使ったセレクタを使いまわせる。
コードの再利用が可能。
1つのCSSファイルにまとめる事が出来る。
条件分岐などのプログラム的な処理が出来る。
CSSファイルを圧縮出来る。
便利なフレームワークが使える。

Sassを利用すると上記のような機能が使えます。この見出しだけ見ても相当魅力的です。俄然やる気出てきますね(´∀｀)♪

Sassを使えるように環境を整える

上述の通り、SassファイルはCSSファイルにコンパイルする必要があるので、「Ruby」と「Sass」をインストールします。

Rubyのインストール

windowsユーザーはインストーラーでサクっと出来ます。（Macには元々インストールされてるとのこと）下記サイトの「Download」からインストーラーがダウンロード出来ますので、最新の安定版をダウンロードしてインストールします。

インストール中にオプションの指定が出来ますので「Rubyの実行ファイルへ環境変数PATHを設定する」にチェックを入れておいた方が良いそうです。そのほかは特に変更しなくてＯＫとのこと。

>>RubyInstaller for Windows

ちゃんとRubyがインストールされたか、バージョンの確認はコマンドプロンプトを立ち上げて以下のコマンドを入力。

ruby -v

「ruby バージョンの数字」が表示されればOK。インストールされてない場合はその旨のエラー文が表示される。（認識されていません、みたいなやつ）

Sassのインストール

Rubyのインストールが終わったらコマンドプロンプトを立ち上げて、以下のコマンドを入力します。

gem install sass

インストールは以上。
ちゃんとSassがインストールされたか、バージョンの確認はコマンドプロンプトを立ち上げて以下のコマンドを入力。

sass -v

「Sass バージョンの数字」が表示されればOK。

何かうまくいかない時はSassの教科書の83ページに対処方法がありました。また、下記サポートサイトも頼りになります。それでもダメならググってください( ；∀；)

>>インストールや実行中にエラーが起こった場合の対処法 | Web制作者のためのSassの教科書 – 公式サポートサイト

あとはgemとSassを最新のバージョンへアップデート。

gemのアップデートは以下のコマンドを入力。

gem update –system

Sassのアップデートは以下のコマンドを入力。

gem update sass

これでアップデートもおしまい！なわけです。

が、落とし穴発生。
この度Sassをもっかい勉強しようと意気込んでブログ書き始めてから自分もアップデートしようと思ったわけですが、私はgemのアップデートがどうしてもSSL認証エラーで進まない罠にハマったので結局、RubyGems.orgからrubygems-updateをダウンロード、インストールしてgemとSassのアップデートを進めました。

Dreamweaverの設定

私は未だにDW CS6を使用しています。DWで編集しやすいように環境設定を変えます。

「編集」>「環境設定」>「ファイルタイプ/エディター」の「コードビューで開く」のところに「.scss」という拡張子を追加。これでSassファイルをDWで開く事が出来るようになる。

次にコードのカラーリングとヒントを表示できるように「MMDocumentTypes.xml」というDWの設定ファイルを編集。ファイルの場所はここ。(win7)

C:\Users\ユーザー名\AppData\Roaming\Adobe\Dreamweaver CS6\ja_JP\Configuration\DocumentTypes\

そのファイルの142行目辺りのwinfileextensionとmacfileextensionの値の部分に下記のように「scss」を追加する。

で、DWを再起動すればOK。

これでSassいじりの準備は全て整ったぜ！ひゃっほい！

Sassファイルをコンパイルするテスト

Sassを使える環境設定も完了したのでちゃんとコンパイル出来るかテストしてみます。

Sassコマンドの書き方は

sass [options] [INPUT]:[OUTPUT]　(オプションはつけてもつけなくてもよい。)

とりあえずテスト用Sassファイルを作ります。中身はとりあえず簡単なもので。

#main {
  width:90%;
  p{
		color:red;
  }
}

適当なフォルダを作ってその中にこれを「test.scss」という名前で保存しました。

コマンドプロンプトを開いて下記コマンドを入力しました。

sass test.scss:test.css

ちゃんとコンパイル出来た(*´ω｀*)♪
コマンド実行後、同フォルダの中に以下のものが表示されました。

/.sass-cache　← キャッショ用のフォルダ
test.css　← コンパイルされたCSSファイル
test.css.map　← わからん。多分新バージョンの何か。後で調べる。
test.scss　← 元のSassファイル

Sassコマンドはフォルダ単位で指定する事もできるので、「Sass」「css」というディレクトリを作って最終的にはフォルダ単位で運用していくようになると思う。

Styleオプションを使ってみる

コンパイルされたtest.cssの中身ですが、こんな感じになっていました。

#main {
  width: 90%; }
  #main p {
    color: red; }

/*# sourceMappingURL=test.css.map */

インデントがあまり好みではないのですが、これは「Nested」というアウトプットスタイルだそうです。sassコマンドのオプション指定をしない場合はこのスタイルでアウトプットされる、と。

アウトプットスタイルは全部で4つ(Nested,Expanded,Compact,Compressed)あるそうです。自分の好きなの、必要なのでいいのだと思います。私の好みは「Expanded」というアウトプットスタイルだったのでオプション付きでSassコマンドを試してみます。

アウトプットスタイルを指定するオプションはStyleオプション。コマンドで「–style スタイル名」をオプション部分に追加して実行します。

sass –style expanded test.scss:test.css

#main {
  width: 90%;
}
#main p {
  color: red;
}

/*# sourceMappingURL=test.css.map */

こんな感じでいつも書いてるcssみたいなコードフォーマットになりました。よしっ。

Watchオプションを使ってみる

Sassファイルを更新するたびに毎回手動でコンパイル作業をするのは大変なので、「Watchオプション」というものが。そのWatchオプションをつけるとSassファイル、またはフォルダを監視して更新保存されると自動的にコンパイルしてくれるというすごいやつです。

オプションは「–watch」で指定、引数はなし。

sass –watch test.scss:test.css

コマンドを実行すると、

Sass is watching for changes. Press Ctrl-C to stop.

と出てきました。これて監視スタートらしいです。書かれている通り、Ctrl + C で監視を中止。

試しに先ほど作ったtest.scssに何か追加して保存してみると、

Change detected to: test.scss
write test.css
write test.css.map

こんな感じのメッセージがコマンド画面に追加されました。test.css側を見てみると…ちゃんと更新されている！出来たー(*´ω｀*)
test.css.mapの方は…これはわからんから後で！

教科書によると、コンパイル出来た時だけでなく、エラーメッセージ等もちゃんと表示してくれるとのこと。すごい。

他にもオプションや便利な使い方、バッチファイルを使う方法などが教科書やサイトに書いてあったけど、とりあえず今すぐいるのは上記の準備くらいなので今回はここで終了。
次はSassの基本機能を勉強するお(*・ω・)ﾉｼ

Sassの勉強　関連記事

投稿日：2015年1月23日 10:11

カテゴリ：: Sass
タグ：: css, Sass

このページの一番上へ

コメントを残すコメントをキャンセル