読者です 読者をやめる 読者になる 読者になる

Milk+ea

Weblog Is My Hobby.

やっぱり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を用意。

gist8025059


適切なディレクトリで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が出たら要らないかもしれないけど