Sassの基礎を覚える為に勉強したことを順番にまとめてみました

仕事でSassを利用しています。

Sassはすごく便利なのは理解できてきたのですが、なんといいますか、基本的な活用からなかなか抜けだせませんでした。
Sassは普通にCSSを書いても利用できてしまうので、ついつい便利だとわかっていても、普段の書き方になってしまいがちでした。

それでも、便利な機能を少しずつ覚えてみると、Sassって本当に便利だな!と思えるようになってきました。
今でも全部覚えているわけではないですが、自分が基礎知識を固める為に、勉強した内容をまとめてみたいと思います。

Sassとは何か?というのは他のサイトでもたくさん紹介されていますので、ここでは取り上げませんが、Sassをこれから学んでいこうというコーダーさんやWebデザイナーさんには参考になるかと思います。

まずはSassをインストールします

この項目は、Mac用の手順になります。
Scoutなどを利用するなど、ターミナルを利用しない場合は次へ進んでください。

rubyのバージョンを確認するコマンド

1.87より古い場合はrubyをアップデートします。

rubyアップデートコマンド

Sassインストールコマンド

一応確認する

これでターミナルでSassを利用できるようになります。

Sassを利用してみてlistenのエラーが出たら

[code]$ sudo gem install listen[/code]
[code]$ sudo gem install –version ‘~> 0.9.1’ rb-fsevent[/code]
この2つで解決できます。

SCSSファイルをCSSファイルへコンパイルできるようにします

SCSSファイルを準備する

今回はサンプルで、testフォルダにSassフォルダとCSSフォルダを用意します。
Sassフォルダの中には、base.scssを用意します。

コンパイル

[code]/test/sass/base.scss[/code]
のSCSSファイルを

へコンパイルしてみます。

–watchを利用してSCSSをCSSへコンパイルしてみる

早速SCSSファイルをCSSファイルへ変換してみます。

Scoutなどを利用してもいいですし、
コマンドラインだと、testフォルダまでcdで移動して、以下のように書きます。

この記述では、

Sassフォルダの中にあるSCSSファイルをCSSフォルダの中にコンパイルしてください。しかもずっと監視していて、保存したら随時コンパイルしてください。さらに、expandedな状態でコンパイルしてください。

というコマンドになります。

もしCSSを出力するフォルダが異なる場合は、
[code]sass –watch hoge1/sass:hoge2/css –style expanded[/code]
この記述では、

hoge1フォルダの中にあるSassフォルダ内のSCSSファイルを、hoge2フォルダの中にあるCSSフォルダへCSSとしてコンパイルしてください。

というコマンドになります。

出力形式を理解する

先ほど、ターミナルで入力した内容の最後に

という記述があります。これは出力形式の指定です。

expandedは一般的なCSSの出力形式になります。
compressedは、圧縮して1行に全てをまとめる形式です。
nested(sass独特の形式),compact(セレクタと属性を1行にする)は特に利用しないので覚える必要はないかと思います。

_のついたSCSSファイルの使い方を理解する

パーシャルファイルです。
読み込み専用のファイルなので、実際にはCSSに出力はされないファイルです。
このパーシャルファイルを機能ごとに用意しておくとわかりやすいようです。

例えば、サンプルで以下の3つを用意してみます。
  • _reset.scss //リセット用CSS
  • _utility.scss //clearficxなどのmixin
  • _css3.scss //css3のmixin
今回のサンプルではこのファイルも利用していこうと思います。

@importでSCSSをインポートしてみる

_reset.scssなどのパーシャルファイルを、

のようにして読み込む事ができます。

インポートの際に、「_」を外す事と、拡張子が省力できるところがポイントです。

先ほど用意したパーシャルファイルを読み込んでみます。

base.scssの中で、

のようにしてインポートします。
しかし、実際にCSSとしてコンパイルして出力されるのは、base.cssだけになります。

ここまででとりあえず準備は完了です。
コンパイルで正常にCSSファイルを生成することができたら、次は実際SCSSファイルに記述していきます。

SCSSファイルへの記述

先ほど作成したbase.scssファイルの中に記述して、コンパイルをしていきます。

次からのサンプルコードは、base.scssを以下のように準備して、.sampleが書いてある場所へ記述していきます。

セレクタをネストしてみる

サンプル .base.scss

まずはネストを使ってみます。

コンパイル結果 base.css

Sassらしい最もわかりやすい形ですね。

&で親を参照したネストをしてみる

サンプル base.scss

コンパイル結果 base.css

擬似クラスの:hoverが綺麗に出力されているのがわかります。

一行コメントアウトを入れてみる

サンプル .base.scss

「//は出力されない」はずなので入れてみます。
一応、通常のコメントアウトもいれてみます。

コンパイル結果 base.css

一行コメントの顔文字は出力されていません。
普通のコメントは出力されているのがわかります。コメントを使い分けして必要なコメントを残すことができます。

変数を利用して色を指定してみる

文字の色を指定してみます。

で色を変数に格納しています。

サンプル .base.scss

コンパイル結果 base.css

変数が入っていることがわかります。

変数を上書きしてみる

サンプル .base.scss

コンパイル結果 base.css

.sample a のcolorの変数が上書きされているのがわかります。

演算を利用してみる

サンプル .base.scss

コンパイル結果 base.css

うえから、足し算、引き算、掛け算、割り算ができているのがわかります。

値を#{}で囲って前後の演算を停止してみる

サンプル .base.scss

たとえば、contentなどでテキストを扱う場合などがあります。

コンパイル結果 base.css

1行目は加算ができていますが、2行目と3行目は加算されずに出力されているのがわかりました。

@mixinで簡単なmixinを作ってみる

あらかじめ用意していた、_utility.scssellipsisのmixinを入れてみます。
ellipsisは、一行ではみ出した場合に…を表示するCSSですね。

サンプル _utility.scss

@includeでmixinを呼び出して利用できる

サンプル base.scss

ellipsisは、横幅を指定しないと機能しないので、mixinでimportした内容にwidth: 200px;を追加しています。

コンパイル結果 base.css

綺麗に出力されました。

@mixinでCSS3なmixinを作ってみる

border-radiusを作るmixinを作成してみます。

#{$property}は、$propertyの変数を利用するために、#{}で変数を解除しています。
#{$property-radius}も同様に変数を解除して、デフォルトの値の5pxを利用できるようにしています。

mixinの引数を利用してみる

先ほど作成したborder-radiusを利用してみます。
デフォルトの値と、引数を入れたパターンを用意してみます。

サンプル base.scss

コンパイル結果 base.css

引数が綺麗に出力されているのがわかりました。
ショートハンドも綺麗に出力されました。

@extendを利用してみる

例えば、button1というclassを作ったとして、button2は、button1に背景を変更を加えたいという場合、extendを利用して同じCSSを再利用できます。

サンプル base.scss

コンパイル結果 base.css

あとに記述されているbackgroundで上書きできているのがわかります。

%プレースホルダーセレクタを使った@extendを使ってみる

プレースホルダーのclassは出力されないので、extend専用にclassを作成してみます。

サンプル scss

コンパイル結果 base.css

%のついたCSSは出力されていないのがわかりました。

clearfixなどのmixinを@extendを利用して、出力されるコードを減らしてみます。

まずclearfixを作ってみます。

サンプル _utility.scss

サンプル base.scss

%clearfixにmixinでclearfix読み込んでいます。mixinからの読み込みを一箇所にします。

コンパイル結果 base.css

mixinからの読み込みを一箇所にする事で、clearfixが一箇所にまとまり、コード毎に書くよりコード量を減らす事ができました。しかも%でextend用に作ったコードは出力されていません。これは必須スキルですね。

制御構文

条件分岐の、@if、@else if、@elseを利用してみます

サンプル base.scss

$typeがblueの場合は、color: red;を出力されるように書いてみます。

コンパイル結果 base.css

blueが出力されたのがわかりました。

繰り返しの@forを利用してみる

サンプル base.scss

指定した回数だけ処理を繰り替えるのが、forです。
.sample-#{i} //3つclassを出力します。
10px * $i; //1,2,3と倍になるようにします。

コンパイル結果 base.css

綺麗に3つのclassが出力されました。

繰り返しの@whileを利用してみる

サンプル base.scss

whileを利用してみます。10ずつmarginを増やしてみます。
<= は「以下を含む」ですね。

コンパイル結果 base.css

marginが10ずつ40まで、出てきました。

繰り返しの@eachを利用してみる

サンプル base.scss

指定したリストがある限り出力するというeachを使ってみます。
文字も使えるようなので入れてみます。

コンパイル結果 base.css

redとblueは綺麗にでました。文字もできました。

Sassの関数を利用してみる

関数とは、例えば、
  • ceil() //小数点以下を切り上げる
  • grayscale() //グレースケールに変換する
  • unit($number) //値の単位を取得する
といったようなことができるSassの機能です。上記以外にも、多くの関数があります。
こちらの記事で詳しく解説されています。
その中から今回は、中間色を取得するmixを使ってみます。

サンプル base.scss

コンパイル結果 css

真ん中の色って#7f7f7fだったんですね!

基礎はこれくらいで

ここまできたら独自のmixinを作るフェーズになるかと思います。
自ら作成しなくても、compassを利用すれば、はじめからたくさんのmixinがありますので、compassをそのまま利用するのも良いと思います。
ただし、compassを利用するとしても、今回のようにSassの基礎を理解していたほうが、どのmixinがどのような動きをするのか理解しやすいのかなーと思います。

最後に

まだ理解が足りない自分が言うのもあれですが、Sassを覚えるには、まず自分でひとつサイトを作ってみるのが良いと思います。
このブログはSassを利用して作成したのですが、すごく勉強になりました。

当初は、ネスト変数簡単なmixinのimportくらいしか利用できていませんでしたが、
「mixinの引数」「%プレースホルダーセレクタを使った@extend」あたりを覚えたくらいから、視野が広がってきたように思います。

そして、関数や、条件分岐繰り返しを使ったり、Compassで用意されているミックスインを利用するなどして、自分のSassスタイルを確立できたらだいぶコーディングが楽になるんじゃないかと思います。

あと、Sassを勉強して気付いた事は、自分の知らなかったCSSのセレクタや、知識がこんなにあるんだと驚いた事です。
その知識を誰もが自由に利用できて、誰もが同じようにCSSを作成できるのがSassのすごいところだと思います。

この記事はさらっとした部分しか触れていませんが、検索すると、他にも詳しく説明されているブログはたくさんあります。
そういったブログのひとつになれたらうれしいです。