Sassの詳しい部分
&:hover でhover時のスタイルが充てられる。
.body {
background-color: pink;
.arm {
color: red;
&:hover{
color: red;
}
}
}
こんな感じに。
もちろん、afterとかvisitedとかも使える。いちいち書かなくてもいいし、何より見やすい。
そして、計算もできるpaddingやボーダー分を引いてwidthの値を求めるってことができる!
.sample {
padding: 0 20px;
width: 100px - 20 * 2;
height: (100px/2);
}
### インターポレーション(#{})
これはすごく便利そう。途中でディレクトリの名前とか場所とかちょっと移動したくても手間!みたいな。
これさえあれば、そんな手間がなくなるみたい。
まあでも、エディタに備わってたりもするのかな?一括置換みたいな?
$class: title;
body.#{$class} {
color: red;
}
これは、body.title{}
になるよ。
@extemdってのも。 なんかプログラミングっぽいよね、いかに簡略化できるかみたいな。まあ、それを考えるのがエンジニア、かw
参考サイト: いつもお世話になるLIG社