CSS Library

CSS/SCSS/SASSの違い

CSSを拡張して便利にしたり、メンテナンスがしやすいようにしたものが、SCSSとSASSです。

SCSSとSASSではスタイルの記述を入れ子形式にすることができます。そのため、波括弧分のStep数が減らせるというメリットがあります。

SCSSとSASSの違いは書式の違いにあり、SASSはインデントを主としている記法となっているため、波括弧でスタイルを囲う必要はなくなり、またセミコロンで最後を閉じる必要がなくなっています。

$var-css:red
h1
  color:$var-css

@mixin func($color: #fff, $f-size: normal)
  color: $color
  font-size: $f-size
.cont-btn
  @include func(red, 20px)

※@mixinはSASSでは=で省略可能

%css-share
  font-family: "Comic Sans MS"
  color: #fdeeef
.nav-text
  @extend %css-share
  font-size: 1em