SassとCompassを使って楽しくCSSコーディング!

  • このエントリーをはてなブックマークに追加

最近CSSも慣れてきて、面白みがないなぁ・・。と思っていました・・。
なのでいろいろと新しいことをやろうーと思って、SassCompassを試してみたら・・。

すごい便利!

特にスマートフォンサイトなどでたくさんCSS3を使う場合には特に便利!

なので自分が忘れちゃった時のため&
皆が少しでも手軽につかえるようになればなーということで、まとめたいと思います。


な感じで見るとよいかと思います。

SassとCompassってなに??なにが便利なの??

Sassを使うと、Rubyをつかってプログラム的にCSSを書いたり出来ます。

「Ruby出来ないしなぁ・・。」って人も問題ないです!私もできません!w

CSSの書き方自体は変わらないので、特に意識せずに書けちゃうと思います。
また、CSSを書くときに使っているソフトを変える必要もありません!

Sass便利ポイント1 : コードが短く書ける!

CSS3でたくさん使えるものが増えてきたこともありそれぞれブラウザでの実装が違っているため、

-webkit-border-radius: 100px; /* webkitを使っているブラウザ用 */
-moz-border-radius: 100px; /* firefox用 */
-o-border-radius: 100px; /* Opera用 */
-ms-border-radius: 100px; /* IE用 */
border-radius: 100px; /* 通常 */

このように、本当は一つで良いものを それぞれブラウザごとに対応したCSSを書かなくてはいけません・・。

ですが!Sassをつかって書くと・・!

@include border-radius(100px);

この一行を書くだけで、上のCSSのコードを全てはきだしてくれるんです!

Sass便利ポイント2 : CSSの入れ子ができる!

header {
	margin: 10px;
	h1 {
		position: absolute;
		top: 10px;
		left: 10px;
	}

	&:hover a {
		display: block;
	}
}

のような感じで書くと、下記のCSSをはきだしてくれます。

header {
	margin: 10px;
}

header h1 {
	position: absolute;
	top: 10px;
	left: 10px;
}

header a {
	display: block;
}

Sassについての簡単な説明

Sass特有のscssという拡張子のファイルを更新すると、cssをはきだしてくれるという仕組みです。

Compassについての簡単な説明

Sassを拡張してCSS3などで「ベンダーフィックス(-webkit-、-moz-、の部分)」が必要なものを簡単にかけるようにしてくれるものや、IEなどのハックが必要なものなどを予め用意してくれます!

/* 角丸 */
@include border-radius(100px);
/* 透明 */
@include opacity(0.8);
/* ボックスシャドウ */
@include box-shadow(
	1px 1px 3px rgba(blue,1),
	1px 1px 3px rgba(blue, 1),
);

などなど他にもCSSが簡単にかけるようになる物がたくさん用意されています!

目次へ戻る

1. まずはじめにSassをインストールします。

Windowsの方

WindowsにはRubyが入っていないため、まずRubyを入れ、そのあとにSassを入れるという手順になります。
下記に詳しくインストール方法が書かれています!

Macの方

Macには最初からRubyが入っているため、ターミナルで下記のコマンドを実行するだけでOKです!

$sudo gem install sass

この方法ではうまくいかない場合は下記の方法などを試してみると良いかもしれません。

また、バージョンが「3.2.0.alpha.35」以上でないと使えない機能がありますので、バージョンを調べて低い場合には、バージョンアップのコマンドを実行しましょう!

私がいれたとき(2012年 2月)には普通にインストールしただけだと、alpha版だからなのか「3.2.0.alpha.35」がインストールされませんでした。

バージョンを調べる方法

$ sudo sass -v

3.2.0.alpha.35へアップデートする方法

$ gem install sass -v 3.2.0.alpha.35

※ WindowsもMacも共通です。

目次へ戻る

2. 次にCompassをインストールします。

$ gem install compass

※ WindowsもMacも共通です。

目次へ戻る

3. Dreamweaverでもscssの拡張子のファイルでコードヒントを使えるように!

なにもしないとコードヒントが出ないので、下記のファイルを修正して使えるようにします。

念のため、バックアップはとっておきましょうねー。

Windowsの方

C:\Program Files\Adobe\Adobe Dreamweaver CS5\configuration\DocumentTypes\MMDocumentTypes.xml

Macの方

/Applications/Adobe Dreamweaver CS5/Configuration/DocumentTypes/MMDocumentTypes.xml

「MMDocumentTypes.xml」内の

winfileextension="css" macfileextension="css"

上記箇所を下記に変更します。

winfileextension="css,scss" macfileextension="css,scss"

目次へ戻る

4. CSSのインデントを自分好みにカスタマイズ!

上記に詳しく書かれていますので、参考にさせていただきました!

私は、下記項目を変更しました!

  • }の後に必ず改行を入れる
  • セレクタが1行にまとめて列挙されるのをセレクタごとに改行する
  • プロパティの前の空白をタブに変更する

目次へ戻る

これで準備が整いました!!

5. 実際にSassとCompassを使ってみよう!

すみません・・。
初期設定の状態から実際に使ってみる部分については既に、詳しく書かれている方がいらっしゃいましたので、URLを紹介させていただきます。m(_ _)m

ここから先は、実際に使ってみて、個人的に使いやすくカスタマイズしたものを用意したので、それをもとに説明していきたいと思います!

内容については、下記の二つのURLの内容は全て理解しなくても大丈夫のように心がけているつもりです!

もちろんどちらも理解した上で読み進めていただくのが一番です!

Sassを使ってみる。

CSS HappyLifeさんがSassの使い方をうまくまとめてくれています。

「【Sassを覚えよう!Vol.6】黒い画面での実際の運用に関して」以降が実際の使い方について説明されていてとても参考になると思います。

Compassを使ってみる。

howtohpさんがCompassの使い方をうまくまとめてくれています。

CompassはSassの内容+αのような感じですので、先にSassの内容が分かっていたほうが、分かりやすいと思います。

目次へ戻る

6. 実際に使ってみて、使いやすくカスタマイズしてみました!

自分なりに使いやすいようにまとめたものを用意したので、それをもとに説明していきます!

ファイルをダウンロード

ファイル一覧
config.rb (Compass初期設定ファイル)start.bat (windows用 Compass準備ファイル)start.command (Mac用 Compass準備ファイル)
│
├ sass
│  ├ _setting.scss (初期設定)
│  ├ _extension.scss (Compassではまかなえなかった部分などの追加・拡張)
│  ├ _animation.scss (css3のanimation周りを使いやすく。)
│  ├ _keyframes.sass (css3のkeyframesがを使えるように。)
│  ├ _import.scss (他のscssを一括読み込み)
│  ├ common.scss (共通CSS書き出し用)
│  ├ default.scss (デフォルトCSS書き出し用)
│  ├ templates.scss (ページごとのCSS書き出し用)
│  └ test.scss (sassの機能テスト用)
│
├ rb
│  └ skyward_design.rb (Rubyを使って機能の拡張)
│
└ html (Sassの機能 テスト環境)
   ├ index.html
   │
   ├ css (実際にはき出されるCSS)
   │  ├ common.css
   │  ├ default.css
   │  ├ import.css
   │  ├ templates.css
   │  └ test.css
   │
   └js (初期設定js sassとは関係ないところですので、説明省略します。jsには説明が書いてあります。)
    ├ common.js
    ├ jquery.belatedPNG.js
    ├ jquery.js
    └ selectivizr.js

Compassの初期設定(config.rb)

config.rbにCompassの設定がかかれています。

現状は上記のファイル一覧に合わせた設定にしていますので、フォルダの構成を変えたい場合には下記を変更してください。

http_path = "/"
css_dir = "html/css/"
sass_dir = "sass"
images_dir = "/"
javascripts_dir = "javascripts"

Compass開始

Windowsの場合「start.bat」、Macの場合は「start.command」を実行することで、現在のフォルダを「config.rb」の設定にしたがって監視してくれます。

フォルダの監視をしないと、cssがはき出されませんので、作業を始める前に実行しましょう!

実際の仕様方法と、Sassの機能を使ってカスタマイズしたファイルの解説

ファイル名に「_」アンダーバーが付いているものは実際にはcssとして書き出されないファイルです。

「_setting.scss」の内容

ページを作る際の最初にする設定が書かれています。

「_setting.scss」にもコメントとして書いてありますが詳しく解説します。

「//」スラッシュ2つは通常CSSではコメントとして扱われないのですが、scss内ではコメントとして扱われます。(cssには書き出されません。)

青文字が追記説明部分です。

// HTML5の場合は「true」
$html5 : true;
// Compass ブラウザサポート
$legacy-support-for-ie6 : true; IE6に対応するか。
$legacy-support-for-ie7 : true; IE7に対応するか。

$experimental-support-for-webkit : true; webkitに対応するか。
$experimental-support-for-mozilla : true; firefoxに対応するか。
$experimental-support-for-opera : true; operaに対応するか。
$experimental-support-for-microsoft : true; IEに対応するか。
$experimental-support-for-khtml : false; khtmlに対応するか。(khtmlはfalseにしています。)

//ie9用 svg
$experimental-support-for-svg: true; IE9でもbackgroundのグラデーションが使えるようにするか。

// 画像パス
$imgPath : "../img/"; imgのパス

// commonフォルダ内の画像のパス
$commonImgPath: "../common/img/"; 共通imgのパス

ほかにも追加したいパスがある場合にはここに追加するようにすると管理しやすいと思います!
パスはここで管理せずに直書きでも問題ないと思いますけどねw

// 標準font-family
$fontFamily : "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "MS Pゴシック", "MS PGothic", Sans-Serif;


// ページの横幅
$baseWidth : 940px;


// 標準テキストカラー
$textColor : #333;


// 標準リンクカラー
$linkColor : #06f;
$linkColor_visited : #39f;
$linkColor_hover : #00f;

他にも共通で使いそうなものを関数として用意しておくと管理しやすくなると思います!

目次へ戻る

「_extension.scss」の内容

この中身はCompressでいまいちなものを修正していたり、個人的に必要なものを追加しています。
全て貼って説明するとかなりの量になってしまうので、部分的に説明していきます。

scss内にも一つづつコメントで説明していますが、もうすこし詳しく書こうと思います!

ベンダーフィックスの順番を変更
-webkit-
-moz-
-o-
-ms-
-khtml-

の順番ではき出されるように変更しています。変更したい場合、またはCompress初期の設定がいい場合は「@mixin experimental」「@mixin experimental-value」の部分を削除もしくは順番を入れ替えてください。

transitionがIE10でも使えるようにIE用ベンダーフィックスを追加
transition
transition-property
transition-duration
transition-timing-function
transition-delay

それぞれ「-ms-」がつくように変更しています。

IE10ってもしかしてベンダーフィックスいらないのかな・・??その場合は必要ないかな。

目次へ戻る

「transition-property」に「transform」を設定する際にベンダープレフィックスをつけるように変更

transformにはベンダーフィックスをつけないと動作してくれないようなので修正しました。

ただ、単品の「transform」にはtransformを使うときにベンダーフィックスをつけるようには修正していません・・。 修正するのに少し手間が掛かりそうでしたので・・。修正でき次第更新するかもしれません。

また、「transition-property: transform,width;」のように複数指定ができないようです。

特に動かしたい要素を限定しない場合はtransition-property : all;で良い気がします。

そのうちCompree側で修正してくれそうな気もしますが・・。

同じテキストシャドウを複数重ねる

テキストシャドウを複数重ねて色を濃くするというのをたまに使ったりするので、合ったらいいなーと思って、追加しました。

//text-shadow-repeat(通常のtext-shadowの記述,繰り返したい数);
@include text-shadow-repeat(0 0 2px rgba(255, 255, 255, 1),15);

目次へ戻る

関数「HTML5」がtrueかfalseかでセレクターの書き方を変える関数の追加

HTML5ではない場合は要素をdivに書き換えてくれます。

header、footerの場合はid、それ以外のHTMLタグはクラスで書き換えてくれます。

header、footerもページで複数使えるからクラスにしたほうがいいかな・・。

個人的にHTML5意外で書くときはページの#header #contents #footer という使い方をしているのでこのような変換方法にしています。

一応追加したぐらいの機能ですので、普通のCSSの書き方でも特に問題ないです。

#{s(header)},
#{s(article)},
#{s(footer)} {
}

上記のようにscssに記述すると、下記のようにHTML5の設定によってはき出してくれます。

$html5 : true;
header,
article,
footer {
}

$html5 : false;
div#header,
div.article,
div#footer {
}
フォントのサイズ計算 関数の追加

pxを入力すると13pxを基準にした%に変換してくれます。

font-size: fz(20);

8以上40px以下の数字を%に変換してくれます。

font-size: 154%;

継承したサイズから目的のサイズを計算してくれます。

// 13を基準に、15のemを計算
.test {
	font-size: fs(15,13);
}
// 13を基準に、15の%を計算
.test {
	font-size: fs(15,13,'%');
}

参考にさせて頂きました!

目次へ戻る

clearfixを簡単に追加できるように

毎回追加するのが大変なので

@include clearfix();
/*----------------------------------------
        clearfix
----------------------------------------*/
.clearfix {
        min-height: 1px;
        _height: 1%;
}

.clearfix:after {
        content: ".";
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
}

コメントも自動的に入りますので、必要ない場合は外したり、自由にカスタマイズしてください!

また、sassには「extend」という機能があります。

同じような記述を使う場合に同じ物を書くのではなくクラスとして一つ用意しておき「extend」でクラスを追加することができます!

p.test {
	@extend .clearfix:after;
}

のように書くだけで・・。下記のように追加してくれます。

.clearfix:after,
p.test {
        content: ".";
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
}

ただし、同じcss内のクラスにしか「extend」は使えないようですので、使い方は考えなくちゃいけないですね。

目次へ戻る

「_animation.scss」の内容

2012年 2月 現在 Compassの初期状態ではanimationを簡単に使えるようにはしてくれていないようですので、このファイルで追加しています。

下記サイトのものを使わせていただいております。

「_keyframes.sass」の内容

2012年 2月 現在 上記同様Compassの初期状態ではkeyframesが簡単には使えるようにしてくれていないようですので、このファイルで追加しています。

この機能はバージョンが「3.2.0.alpha.35」以上でないと使えないようですので、もしもエラーが出る場合には、バージョンをアップしてみて下さい。

下記サイトのものを使わせていただいております。(「_animation.scss」と同時に配布されております。)

上記で配布されているものから、Compassのブラウザサポートの設定(「ベンダーフィックス」追加・削除)が反映されるように修正しております。

「_import.scss」の内容

いままで説明しました「_setting.scss」「_extension.scss」「_animation.scss」「_keyframes.sass」が全て読み込まれています。毎回全てをimportするのは大変なので一括でまとめたファイルです。

ここまではいつも使いまわしができる初期設定のファイルで、ここからは実際に書き出されるcssです!

「common.scss」の内容

共通のcssを「common.css」として「html/css」にはき出してくれます。

特に書き方などは変わりませんのでいつもcssを使うときのように書いちゃいましょう!

「default.scss」の内容

初期設定用の「default.css」として「html/css」にはき出してくれます。

HTML5の関数がtrueのときは

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
display:block;
}

を追加してくれるようにしています。

ここは使わなそうなものは削除しちゃったり、いつも使っているdefault.cssに変更したり自由に変更してください。

「templates.scss」の内容

ページごとに使い分けるcssを「templates.css」として「html/css」にはき出してくれます。

今は仮に用意してあるので、中身は書いてありません。

「test.scss」の内容

sass、compassの機能をいろいろテストしたものをまとめています。
実際にHTMLに反映されていますので、いろいろ試してみてください!
コメントに解説を残していますので見ればやってることは何となく分かるかと思います!

目次へ戻る

Rubyを使って機能の拡張(skyward_design.rb)

こちらのものをそのまま使わせていただいております。

zeropaddingは連番の数字をつける際に10より小さい場合には0をつけてくれるというものです。
背景画像の連番を別々のクラスに付けたい場合などに便利です。

sassの機能で便利なfor文と一緒に紹介しますね!

// zeropadding(ゼロの数, $i)
$tmp: "";
@for $i from 1 through 5 {
$tmp: zeropadding(2, $i);
.item#{$tmp} {
background-image: url(images/test#{$tmp});
}
}

上記のようなjavascriptで使うようなfor文をかくことで・・。下記のようなCSSをはき出してくれます!

.item01 {
	background-image: url(images/test01);
}

.item02 {
	background-image: url(images/test02);
}

.item03 {
	background-image: url(images/test03);
}

.item04 {
	background-image: url(images/test04);
}

.item05 {
	background-image: url(images/test05);
}

目次へ戻る

その他参考にさせていただいたサイト

File: SASS_REFERENCE
Sassで使える機能の使い方が書かれています。
sassの抑えておきたいfunctionの使い方 « NAVER Engineers' Blog
Sassのfunctionの使い方について書いてあります。

まだまだ使い始めなので、いろいろ変更したいところや、機能を思いついたら追加していくと思いますので、

そのときはどんどんここのファイルを更新していくようにします!

すごい長い記事になってしまった・・。分けたほうがよかったかな・・。

目次へ戻る

コメント : 0

コメントフォーム

トラックバック : 0

http://develo.org/mt/mt-tb.cgi/83

このページの先頭へ戻る