Riot Pug Sass Typescriptで楽にWebページ・アプリを開発 (何が便利か編)[Sass編]

親記事

主要な機能

CSSの { } ; を廃止する。
インデントで構造を表現する。
変数、関数、mix in、importが使える。

従来のCSSとの比較

同じ表現を無くす

CSS

.one {
  margin: 64px;
  /* この64pxどっから出てきた？ */
  width: calc(100% - 64px * 2);
}

SASS

$one-margin: 64px
.one
  margin: $one-margin
  // 100%からmarginを引いていることがわかる
  width: calc(100% - #{$one-margin} * 2)

構造をインデントで表現する

CSS

.one {
  width: 100%;
}

.one > .two {
  width: 50%;
}

/* 増えてくると見づらい */
.two > .three {
  width: 30%;
}

.three:hover {
  color: red;
}

SASS

.one
  width: 100%

    // &はこの場合は.one、つまりthisを指す
    & > .two
      width: 50%

      & > .three
        width: 30%

        &:hover
          color: red

importが使える

CSS

.one {
  /* なんための色？ */
  background: #dfdfdf
}

SASS

_color.sass

$main-theme: #dfdfdf

index.sass

@import "color.sass"

.one
  // 背景はメインテーマ色で
  background: $main-theme

比較考察

従来のCSSよりわかりやすいスタイルを書けるようになると思います。