MacでこれからSass(Compass)を始める!実践編

こんにちは。

遠藤です。

いよいよ実践編です。

ひたすらサンプルを書いていきます!

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/を見たほうが・・・

関連記事


TOP
TOP