/blog

CSS をネストさせたり、変数を使って記述し、コマンドで CSS を書き出すことができる Sass が 3.0 以降変わったようで再び使ってみている。

個別に細かく id や class を付けるよりは、最低限の id・class で継承させるよう出来たらいいと思っているので、ネストして書けるのは便利。その中でも & (Parent Selectors) は強力。

• File: SASS_REFERENCE

ブログの CSS などでは、ul の入れ子、本文の ul、サイドバーの ul など出てくるので、例えばこんな感じで入れ子になることはよくあるんじゃないかと思う。

イメージです。Sass はバージョン 3.0.24

ul,
ol {
  margin: 0 0 1.5em 2em;
  padding: 0;
}
  ul li,
  ol li {
    margin: 0;
    padding: 0;
  }
  ul ul,
  ul ol,
  ol ul,
  ol ol {
    margin: 0 0 1.5em 2em;
  }

  #sidebar ul,
  #sidebar ol {
    margin: 0 0 1em 2em;
  }
  #sidebar ul.flat,
  #sidebar ol.flat {
    margin: 0 0 0 2em;
  }

  .single #sidebar ul.flat,
  .single #sidebar ol.flat {
      font-style: italic;
      margin: 0 0 1em 2em;
  }

これを Sass の SCSS 記法だとこう書ける。

/* style.scss */
ul,ol {
  margin: 0 0 1.5em 2em;
  padding: 0;
  li {
    margin: 0;
    padding: 0;
  }

  ul, ol {
    margin: 0 0 1.5em 2em;
  }

  #sidebar & {
    margin: 0 0 1em 2em;
  }
  #sidebar &.flat {
    margin: 0 0 0 2em;

    .single & {
      font-style: italic;
      margin: 0 0 1em 2em;
    }
  }

}

デフォルトで書きだすとこうなる。

ul, ol {
  margin: 0 0 1.5em 2em;
  padding: 0; }
  ul li, ol li {
    margin: 0;
    padding: 0; }
  ul ul, ul ol, ol ul, ol ol {
    margin: 0 0 1.5em 2em; }
  #sidebar ul, #sidebar ol {
    margin: 0 0 1em 2em; }
  #sidebar ul.flat, #sidebar ol.flat {
    margin: 0 0 0 2em; }
    .single #sidebar ul.flat, .single #sidebar ol.flat {
      font-style: italic;
      margin: 0 0 1em 2em; }

compact で書き出すと、

ul, ol { margin: 0 0 1.5em 2em; padding: 0; }
ul li, ol li { margin: 0; padding: 0; }
ul ul, ul ol, ol ul, ol ol { margin: 0 0 1.5em 2em; }
#sidebar ul, #sidebar ol { margin: 0 0 1em 2em; }
#sidebar ul.flat, #sidebar ol.flat { margin: 0 0 0 2em; }
.single #sidebar ul.flat, .single #sidebar ol.flat { font-style: italic; margin: 0 0 1em 2em; }

compressed で書き出すと、

ul,ol{margin:0 0 1.5em 2em;padding:0}ul li,ol li{margin:0;padding:0}ul ul,ul ol,ol ul,ol ol{marg
in:0 0 1.5em 2em}#sidebar ul,#sidebar ol{margin:0 0 1em 2em}#sidebar ul.flat,#sidebar ol.flat{ma
rgin:0 0 0 2em}.single #sidebar ul.flat,.single #sidebar ol.flat{font-style:italic;margin:0 0 1e
m 2em}

となる。

「こう書けたら楽なのに」が出来る感じですっきり。