【SASS】sassを使ってみる。 - 続かないブログ

前回はscssを使ってみたが、今回はsassを少しさわってみる。

内容は前回のscssと同じ。scssはカッコでネストを表現していたけどsassはインデントを行う。またセミコロンも不要のようだ、直感的にはscssの方が書きやすい。

div
    width: 100px
    height: 100px
    &.green
        background: green
    
    &.yellow
        background: yellow
    
    &.red
        background: red

コンパイルを行うとscssの時と同じcssファイルが出力された。

div {
  width: 100px;
  height: 100px;
}
div.green {
  background: green;
}
div.yellow {
  background: yellow;
}
div.red {
  background: red;
}/*# sourceMappingURL=style.css.map */

HTMLの結果も同じ。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>SCSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
        <div class="green"></div>
        <div class="yellow"></div>
        <div class="red"></div>
</body>
</html>