やっぱりSassをネストして書きたい
(前)
とりあえず適当にSassをネストのようにして書く。
// test $base : #fff $sub : #fff $accent: #Fff %test &:hover color: $accent .bland margin: 0 font-size: 2rem .bland-a color: $accent text-decoration: none +transition( .2s linear ) .contents width: calc(70% - 2rem - 1px) padding-right: 1rem border-left: 1px solid $base margin-right: 1rem .contents-inner padding: 1rem background: $base & > h1 color: $base font-size: 1.3rem @extend %test & & a text-decoration: none & + .sidebar width: 30% .sidebar-box background: #fff margin-top: 3rem & + .sidebar-box margin-top: 1rem .footer text-align: center & small font-size: 1.3rem
Rakefileを用意。
適切なディレクトリでrake
すると。
// test $base : #fff $sub : #fff $accent: #Fff %test &:hover color: $accent .bland margin: 0 font-size: 2rem .bland-a color: $accent text-decoration: none +transition( .2s linear ) .contents width: calc(70% - 2rem - 1px) padding-right: 1rem border-left: 1px solid $base margin-right: 1rem .contents-inner padding: 1rem background: $base .contents-inner > h1 color: $base font-size: 1.3rem @extend %test .contents-inner h1 a text-decoration: none .contents + .sidebar width: 30% .sidebar-box background: #fff margin-top: 3rem .sidebar-box + .sidebar-box margin-top: 1rem .footer text-align: center .footer small font-size: 1.3rem
キタ━━━━(゚∀゚)━━━━!!
Scssと違ってSassのネストはインデントするだけだし、「じゃあスペース取り払えばいいじゃん!」と思ったんです。
&を書いた場合だけネストされるって感じになりました。
普段はネストのままコンパイルして、完成したらネストを解除してからコンパイルみたいな考えです。
まぁSass3.3が出たら要らないかもしれないけど