sass (scss) 学習メモ

仕事では多分使えないが、楽になりそうなのでやっておこうシリーズ(今後増えそう)。

まず最初はSass(scss)。
とりあえず一番CSSに近そうなSCSS記法で勉強。
というかProg-8で学べるやつがそれなので学ぶ。

以下目次。

scssとは

基本的にCSSと同じでOKだが、そのままブラウザに入れても使えない。
ので、sass(scss)記法で書いたやつはコンパイルの必要あり。
なぜここまでして.scssを使うかというと、冗長になるCSSの欠点(他諸々あるが)を補うため。
ここには入れ子構造が採用されている。

入れ子

なんでCSSの標準ではないのか。
書く量減って、
階層構造間違えずに済んで、
めっちゃ便利。

h2 {
  /* h2 にあてるやつ */
  .sub__topic {
    /* h2 .sub__topic にあてるやつ */
  }
}

パッと見でわかってよろしい。

自分を指定する( & )

で、子孫要素全部ではなく、h2.sub__topicとか(子要素Only)に当てたい場合は、&でつなげる。

h2 {
  &.sub__topic {
    /* h2.sub__topic */
  }
}

で、:hoverとか:activeみたいな疑似クラスなんて使うときも&でいける。

h2 {
  &:hover {
    /* h2:hover */
  }
}

---

ちょこっとずつ、勉強する