SASSなかなかいいよ、使える環境さえできれば、便利！

複雑なデザインだとどうしても、タグの階層？が深くなってCSS書くのも大変だけどもこれがあれば楽になる！
例えば下記のようなhtmlの場合

html
1
2
3
4
5
6
<div class="box">
        <p>テキストテキストテキスト</p>
<ul>
<li><a href=""><span>タイトル</span>テキスト</a></li>
</ul>
<div>

CSSはこんな感じになるんだけど（内容は適当だよ！）

css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.box p{
text-align:center;
}
.box ul{
padding:10px;
}
.box ul li{
border-bottom:1px solid #ccc;
}
.box ul li a{
color:#666;
text-decoration:none;
}
.box ul li a span{
display:inline-block;
color:#000;
padding-right:10px;
}

SASSだと入れ子にできるので、何度もulやliを書く必要がなくなる！

SASS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box {
p { text-align:center; }
ul { padding:10px;
li { border-bottom:1px solid #ccc;
a { color:#666;
text-decoration:none;
span { display:inline-block;
   color:#000;
   padding-right:10px;
}
}
}
}
}

あと変数とかも使えるからすごい便利！

SASS
1
2
3
4
5
6
7
8
9
10
11
12
13
$f1: 12px;
$f2: 14px;
$c1: #000;
$c2: #fff;
 
p{
   font-size:$f2;
   color:$c1;
}
a{
   font-size:$f1;
   color:$c1;
}

ただ、コンパイルするのにRubyとか必要になるから環境つくるまでは面倒だったかな・・・
Ruby使ったことないし！ 自動コンパイルも設定しないとだし～
でも、環境整えばすごい楽になると思う！

コメントを残す