前回のエントリーで、無事にSassが動作する環境が整ったかと思います。
今回は、いよいよ通常のCSSでは出来なかったSassの記述（Sass記法）に関してです！
まずは基本って感じですが、これだけでも十分Sassを利用することでコーディングの効率が上がる！って思ってもらえれば幸いです＞＜
記法の前に
Sass記法の前に、SassはCSSの「完全な上位互換」と言えるので、CSSのルールはすべてそのまま利用することが出来ます。
その為、cssファイルをそのまま拡張子だけ .scssに変更して変換（コンパイル）し直すみたいな事も可能です。（圧縮できる程度のメリットしか有りませんが）
軽く余談ですが、このCSSとの完全な互換性が従来のSassには無かったのですが、現行のバージョンではそれが出来るので、余計な事を覚える必要がなく、Sassの機能を今までのCSSの知識にプラスアルファとして使えるんです。
これに寄ってハードルが下がり、学習コストも最低限で済むので非常に意味の有る事かなーと。
ただ、一部のCSSハックに関しては変換した際にエラーになってしまうので、その場合は別の方法で書く必要があります。
細かい部分まで把握できていませんが、引っかかる可能性が高いハックとしては次のような「/」を使ったIE6/7用のハックを使うとエラーになります。
.item {
/zoom: 1;
}
「/」が使えないので、この場合は「*」にすれば問題有りません。
.item {
*zoom: 1;
}
いきなりちょっと不便っぽい部分が出てきましたが、Sassの素敵なトコの1つとしてエラーがちゃんと表示されることです。
その為、ScoutのLogを見ると下記のように表示されます。
>>> Change detected to: style.scss
error style.scss (Line 12: Invalid CSS after ".item {": expected "}", was "/zoom: 1;")
overwrite style.css
英語が出来なくても『style.scss の12行目でエラーが出てる！何か /zoom: 1; がInvalidなCSSっぽい！』って感じで分かるので、変にハマって時間を取られません。
「/」以外にも単純な文法違反でもちゃんとエラーが返ります。
例えば、、、
.item {
width: 350px;
}s
何か、} の後に s が残ってる！！！（きっと、Ctrl+SしたつもりでCtrlが押せてなかったんですね）とかでもちゃんとエラーになるので、ケアレスミスが原因で時間を取られてしまう事が減ると思います。
記事書いてて思いましたけど、これって結構ステキですね。
互換性の話だったのに、気付けばエラー処理の話になってしまいましたが、こんな感じで今のCSS知識はそのまま使うことが出来ます。
Sassの基本的な記法
の前に がちょっと長くなりましたが、ここからがSassで使える記述方法に関してです。
意外とそれぞれの項目が長くなったので、アンカーリンクなんて付けてみた。
ルールのネスト - Nested Rules
何はともあれコレだけはマスターしておきたい記法です。
基本的な機能の中でもダントツで利用するのがネストで、入れ子でスタイルを書いていく事が可能です。
いつものCSS
#main {
width: 600px;
}
#main p {
margin-bottom: 1.5em;
}
いつもはこんな感じですよね？
これを、Sass記法のネストを使うと、、、
Sass
#main {
width: 600px;
p {
margin-bottom: 1.5em;
}
}
と、書くことが可能です。
上記は一番シンプルな例ですが、多少入れ子が多い例も上げてみます。
いつものCSS
#header {
width: 940px;
}
#header h1 {
float: left;
}
#header ul#nav {
height: 50px;
}
#header ul#nav li {
float: left;
}
#header ul#nav li a {
float: left;
width: 80px;
}
ヘッダーっぽい部分を例にしてみました。
これを、Sass記法のネストを使うと、、、
Sass
#header {
width: 940px;
h1 {
float: left;
}
ul#nav {
height: 50px;
li {
float: left;
a {
float: left;
width: 80px;
}
}
}
}
こんな風に書くことが出来ます。
これを保存して変換するといつものCSSと同じ感じにしてくれます。
ちなみに、インデントは無くても大丈夫です。この辺りは可読性が良いと思う方法で書いてもらえれば。
これだけでもコピペから解放され、単純に記述量も減っているのが分かると思いますが、このネストのメリットはメンテナンス性の部分でもかなり力を発揮します。
例えば、上記の #header が #globalHeader に変更する必要が出たとします。
この際に、いつものCSSでは #header から始まる全てを変更なり置換なりをしないと行けませんが、ネストを利用して書いている場合、最初の #header を変更するだけでOKです。
これにより、IDやクラス名が違う別の案件へのコピペも楽になり、再利用性が向上しますよね。
ネストには、プロパティやmedia queriesでも使うこと出来たりするんですが、その辺りの詳細は後のエントリーで書く予定です（ちゃんと書けよ自分）。
- 2012年1月25日に書きました：
- ネストをもうちょい使いこなす
& 親セレクタの参照 - Referencing Parent Selectors
セレクタに「&」を使うことでネストしている際の親セレクタの参照が可能です。
Sass
a {
font-weight: bold;
&:hover {
color: red;
}
}
& が親セレクタを参照するので、&:hover は a:hover としたのと同じ扱いですね。
これを、変換すると次のようになります。
変換されたCSS
a {
font-weight: bold;
}
a:hover {
color: red;
}
変換されたCSSは、実際に変換されたCSSとは違う可能性が有ります（これ以降のも同様に）。
この例だと殆ど利点が分かりませんが、これの最たる例がCSSシグネチャとして利用したい場合かと思います。
例えば、トップページだけ色が変わってる場合なんかに、body要素に指定したclassやIDでスタイルを振り分けることが有ると思います。
いつものCSS
#sub {
float: right;
width: 200px;
background: #ccc;
}
.body-top #sub {
background: #fff;
}
いつものだと、こんな風にしますよね。
Sassのネストを使って書いていると、部分的にスタイルを振り分けるのにネストされた中だと親は参照できないので、そう言った場合に「&」を利用します。
Sass
#sub {
float: right;
width: 200px;
background: #ccc;
.body-top & {
background: #fff;
}
}
こんな感じで、&を使うことでネストされた状態でも親セレクタを参照できます。
この程度の例なら、ネストしないで外に書けば良いんですが、ネストされた状態が長くなると、記述する位置がだいぶ変わってしまい分かりにくくなるので、そんな場合に使っていけます。
コメント - Comments: /* */ and //
CSSのコメントは /* */ で囲みますが、Sassだと通常のコメントに加え、// による1行コメントが可能です。
Sass
//メインコンテンツ
#main {
width: 600px;
// p要素
p {
margin-bottom: 1.5em;
}
// ul要素
ul {
margin: 0 0 1.5em 20px;
li {
margin-bottom: 5px;
}
}
}
JSとかちょっとでも触れてれば、1行コメントは馴染みが有ると思うので詳しい説明は不要かと思いますが、変換した際に1行コメントに関しては削除され、いつものCSSによるコメントは変換しても基本的に残ります。
変数 - Variables
変数と聞くと、軽くプログラムアレルギーが出る人も居るかも知れませんが、ちょっと使うだけならとても便利な機能なのでこれもぜひ覚えましょう。
変数は、任意の名前を付けて、任意の場所で呼び出したりすることが出来る機能です。
Sass
$yokohaba: 250px;
こんな風に変数を定義しておけば、任意の場所で変数の値を呼び出すことが出来ます。
変数の名前は$から始め、その後は、いつものCSSと似た感じで「:」で区切ってから値を指定します。
Sass
#sub {
width: $yokohaba;
ul.bnrList {
width: $yokohaba;
}
}
定義した変数を、値の部分に入れることで呼び出されます。
これを変換すると次のようになります。
変換されたCSS
#sub {
width: 250px;
}
#sub ul.bnrList {
width: 250px;
}
変数を上手く利用することで、重複したスタイルを何度も書く必要が無く、値とかも間違えたりしなくなります。
ちなみに、変数はファイルの最初の方にまとめておいたり別ファイルに記述しておくと見通しが良くメンテナンス性が向上するかと思います。
他の例として、基本のフォントカラーやリンクカラーを予め指定しておけば良い感じです。また、変数の値にはマルチバイト文字も使えるのでfont-familyの指定とかも可能です。
Sass
// ベースフォント
$base_font: "メイリオ", "Meiryo", verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
// ベーステキストカラー
$font_color: #333;
// ベースリンクカラー
$link_color: #06f;
$link_color_hover: #00f;
body {
color: $font_color;
font-family: $base_font;
}
#main {
a:link {
color: $link_color;
}
a:hover {
color: $link_color_hover;
}
}
これを、変換すると次のような感じになります。
変換されたCSS
body {
color: #333333;
font-family: "メイリオ", "Meiryo", verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
}
#main a:link {
color: #0066ff;
}
#main a:hover {
color: blue;
}
この例だけだと、記述する量が増えてるのでアレですが、#main以外にも#footerで同じ色を使いたいとかそんな時に値を覚えてる必要が無いので、微妙に色を間違えるとかが無くなって統一性が出しやすくなったりします。
この他にも変数には、便利な使い方が多くありますが、その辺りの詳細は後のエントリーで書く予定です（ちゃんと書けよ自分）。
- 2012年1月26日に書きました：
- 変数と演算で効率的に
演算
Sassでは、足したり引いたりって言う演算が出来ます。
この演算がかなり頭が良いので非常に素晴らしいのですが、複雑なことは抜きにしてココではカンタンで実用性が高そうな例を。
Sass
.item {
width: 300px - 14px;
padding: 7px;
}
こんな風に書けます。これを変換すると、、、
変換されたCSS
.item {
width: 286px;
padding: 7px;
}
こうなるんです！もう電卓から解放される！！
ボクみたいに暗算が苦手な人からすると、これヤバイ。
box-sizing: border-box; が使えれば、paddingの計算とか不要ですけど、あのブラウザに対応させるには、こんなプロパティは使えないですからね...
ちなみに、単位は省略してもよしなにやってくれるので「14」と書いても同じ結果が返ってきます。
単位の省略に加えこんな風にすることも。
Sass
.item {
width: 300px - (7 * 2) - 2;
padding: 7px;
border: 1px solid #666;
}
お前どんだけ計算したくないんだよ！って感じもしますが、感覚的にはあくまでも横幅は300pxなんだよ！！と思うわけです。ボクは。
これを変換すると期待した通り次のようになります。
変換されたCSS
.item {
width: 284px;
padding: 7px;
border: 1px solid #666;
}
この他にも演算には、変数に対して使うことが出来たり、もっと便利な使い方が多くありますが、その辺りの詳細は後のエントリーで書く予定です（ちゃんと書けよ自分）。
- 2012年1月26日に書きました：
- 変数と演算で効率的に
ミックスイン - Mixins
ミックスインは、プロパティやセレクタをまとめてワンセットにしておく事が可能で、それらをカンタンにインクルード（読み込む）する事が出来ます。
変数の機能を強化したと言うか便利にしたようなイメージです。
Sass
@mixin inline_block {
display: inline-block;
*display: inline;
*zoom: 1;
}
@mixinの後に半角スペース、任意の名前って感じで定義します。
この例では、display: inline-block; を IE でも使う場合に、 *display: inline; と *zoom: 1; を指定する必要があります。
これを毎回書くと面倒なので、ミックスインを使って予め定義しておくことで、次のように1行書くだけでインクルード出来ます。
Sass
.sampleBox {
@include inline_block;
background: #eee;
}
@includeの後に半角スペース、ミックスインで定義した名前って感じで記述します。
当然、他の宣言と一緒に書くことが可能です。
これを変換すると、、、
変換されたCSS
.sampleBox {
display: inline-block;
*display: inline;
*zoom: 1;
background: #eee;
}
無事にインクルードされ、展開されました。
こんな感じで、何度も使うようなスタイルや長めの宣言を予め定義してインクルード出来るので、かなりの工数削減になると思います。
特にCSS3使ってて、ベンダープレフィックスが多い場合とか。
このミックスインもかなり強力な機能なので、がっつりやり出すとかなり覚えたりやることが多いですが、いきなり複雑な事はせずに、この宣言何度も書いてるなーと思ったらミックスインで定義しておく位が最初は良いのかなと。
ちなみに、この inline-block程度ならミックスインではなく次に説明する セレクタを継承出来る @extend を使った方が良いかもです。
この他にもミックスインは、変数と合わせたり初期値を指定したり、とても色んな事が出来ますが、もうちょっと詳しい説明は後のエントリーで書く予定です（ちゃんと書けよ自分）。
セレクタの継承 - Selector Inheritance（@extend）
@extend は、一度使ったセレクタを継承して使うことが出来ます。
ミックスインと似てる部分も多いのですが、似て非なるものって感じで用途がだいぶ変わってきます。
文だと伝わる気がしないので、例を見てください。
Sass
.imgR {
float: right;
margin-left: 10px;
margin-bottom: 1.5em;
}
これだけ見ても、いつものCSSと何ら変わりは有りませんが、この一度使ったセレクタを使うことが出来ます。
Sass
.photo {
@extend .imgR;
}
と書くことで .imgR で指定した宣言が .photo でも継承されます。
これを変換すると、、、
変換されたCSS
.imgR, .photo {
float: right;
margin-left: 10px;
margin-bottom: 1.5em;
}
こんな感じで変換されるので、clearfix等のように一度使ったセレクタを再利用したい場合に便利な機能です。
ちなみに、clearfixを @extend で利用する場合はこんな感じです。
Sass
.clearfix {
*zoom: 1;
&:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
}
ul.menu {
@extend .clearfix;
background: #ccc;
li {
float: left;
width: 100px;
}
}
変換されたCSS
.clearfix, ul.menu {
*zoom: 1;
}
.clearfix:after, ul.menu:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
ul.menu {
background: #ccc;
}
ul.menu li {
float: left;
width: 100px;
}
clearfixから話を戻して。
また次のように、スタイルを上書きしたい場合も有ると思います。
Sass
.imgR {
float: right;
margin-left: 10px;
margin-bottom: 1.5em;
}
.photo {
@extend .imgR;
margin-left: 5px;
}
この様な場合は、次のようにちゃんと分けて変換してくれます。
変換されたCSS
.imgR, .photo {
float: right;
margin-left: 10px;
margin-bottom: 1.5em;
}
.photo {
margin-left: 5px;
}
部分的に、スタイルを上書きしたい場合も問題ないですね。
こんな感じで便利な @extend ですが、現状だと単独のセレクタしか使うことしか出来ません。
よく分からない説明ですが、次の場合はエラーになっちゃいます。
Sass（エラー）
.item .imgR {
float: right;
margin-left: 10px;
margin-bottom: 1.5em;
}
.photo {
@extend .item .imgR;
}
子孫セレクタとかセレクタを組み合わせるとダメって事ですね。
これは、将来的に対応されるのかな。
@extend は使い方に寄ってはミックスインでも何ら問題が無いのですが、大きな違いとして、ミックスインはインクルードする度に展開され、@extend はグループ化されて変換されます。
なので、例えばclearfixをミックスインで定義して、複数ヶ所でインクルードするとその数だけ宣言が増えていきますが、@extend だとグループ化されるのでより合理的なCSSになります。
この他にも@extend は、ややこしいルールがあったりするのですが、そこまでは触れなくて良いかなーと思うので、もうちょっと詳しい説明は他の方のブログ等を参照して下さい！（やった、後で書かない！）
ざっとですがこんな感じです
どうだったでしょうか？
確かに覚えることは有りますが、ちょっと覚えるだけでかなり効率が上がると思いませんか！？
今回紹介したのは一番基本的な部分ですが、基本とは言え、十分覚えることが有ると思うので一つ一つ覚えて身に付けていくと良いかと思います！
これ書くだけでも意外と疲れたけど、後で書く系が結構あるんで追々頑張って書きます！＞＜
でも、次回は黒い画面でSassを使えるようにする方法を書きますー。