こんにちは。
遠藤です。
いよいよ実践編です。
ひたすらサンプルを書いていきます！
Sass
入れ子
Sassは入れ子形式で記述できます。
[css title=”SASS”]
#contents {
width: 600px;
p {
margin: 0 0 1em;
em {
color: #f00;
}
}
}
[/css]
コンパイルすると
[css title=”CSS”]
#contents {
width: 600px;
}
#contents p {
margin: 0 0 1em;
}
#contents p em {
color: #f00;
}
[/css]
変数
sassは変数が使えます
[css title=”SASS”]
$red: #FF0000;
.title {
color: $red;
}
#contents {
.infomation {
border: 1px solid $red;
}
}
[/css]
コンパイルすると
[css title=”CSS”]
.title {
color: #ff1122;
}
#contents .infomation {
border: 1px solid #ff1122;
}
[/css]
アンパサンド（&）
疑似クラスや親要素を参照することができます。
[css title=”SASS”]
.contents{
background: #FFF;
&:hover{
background: #000;
}
&.brother{
background: #333;
}
.main &{
background: #999;
}
}
[/css]
コンパイルすると
[css title=”CSS”]
.contents {
background: #FFF;
}
.contents:hover {
background: #000;
}
.contents.brother {
background: #333;
}
.main .contents {
background: #999;
}
[/css]
演算
sassは演算子だってかけちゃいます。
[css title=”SASS”]
.contents{
margin: 10px * 10;
width: 100px – 10 * 2;
height: (100px / 2);
}
[/css]
コンパイルすると
[css title=”CSS”]
.contents {
margin: 10px;
width: 80px;
height: 50px;
}
[/css]
※除算のばあい、括弧が必要です。
round
sassでは四捨五入の関数も準備されてます。
round()は小数点以下を四捨五入してくれます。
[css title=”SASS”]
.contents{
width: (51px / 2);
height: round(51px / 2);
}
[/css]
コンパイルすると
[css title=”CSS”]
.contents {
width: 25.5px;
height: 26px;
}
[/css]
rgba
sassでは16進数で入力したカラーコードをRGBA形式に変換できます。
[css title=”SASS”]
.contents{
background: rgba(#ff0000,0.8);
}
[/css]
コンパイルすると
[css title=”CSS”]
.contents {
background: rgba(255, 0, 0, 0.8);
}
[/css]
Mixins
sassでは変数より便利なMixinsという複数定義ができます。
[css title=”SASS”]
@mixin mix-border($value: 5px) {
-webkit-border-radius: $value;
-moz-border-radius: $value;
border-radius: $value;
}
.contents-a {
@include mix-border;
}
.contents-b {
@include mix-border(10px);
}
[/css]
コンパイルすると
[css title=”CSS”]
.contents-a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.contents-b {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
[/css]
コメント
Sassではコメントが2パターンあります。
「//」と「/* */」です！
[css title=”SASS”]
// css入らないコメント
.sample-a{
color: #000;
}
/* cssに入るコメント */
.sampe-b{
color: #000;
}
[/css]
コンパイルすると
[css title=”CSS”]
.sample-a{
color: #000;
}
/* cssに入るコメント */
.sampe-b{
color: #000;
}
[/css]
セレクタの継承
Sassではセレクタの継承ができます。
[css title=”SASS”]
h1 {
border: 4px solid #ff9aa9
}
.speaker {
@extend h1;
border-width: 2px;
}
[/css]
コンパイルすると
[css title=”CSS”]
h1, .speaker {
border: 4px solid #ff9aa9;
}
.speaker {
border-width: 2px;
}
[/css]
compass
さらにコンパスを使うとこんなに便利に！
Clearfix
クリアフィックスをする場合、下記の様に書きます。
[css title=”SASS”]
@import "compass/utilities/general/clearfix";
.sample {
@include clearfix;
}
[/css]
コンパイルすると
[css title=”CSS”]
.sample {
overflow: hidden;
*zoom: 1;
}
[/css]
radius
角丸のベンダープレフィックスもcompassなら一行で！！
[css title=”SASS”]
@import "compass/css3/border-radius";
.sample {
@include border-radius(5pc);
}
[/css]
コンパイルすると
[css title=”CSS”]
.sample {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
[/css]
box-shadow
ボックスシャドウのベンダープレフィックスもcompassなら一行で！！
[css title=”SASS”]
@import "compass/css3/box-shadow"
.sample {
@include box-shadow(1px 2px 3px #444);
}
[/css]
コンパイルすると
[css title=”CSS”]
.sample {
-webkit-box-shadow: 1px 2px 3px #444444;
-moz-box-shadow: 1px 2px 3px #444444;
box-shadow: 1px 2px 3px #444444;
}
[/css]
compassには上記以外にヘルパーや、ページレイアウトの支援などここでは紹介しきれないほど高機能です。
ここの記事なんかより、公式http://compass-style.org/を見たほうが・・・