第2章 Sassの利用環境を整えよう2-1 エディタでSassを使ってみようSample Code

Live Sass CompilerでSassファイルをコンパイルする

.scssファイルを作成

1
#main {
2
  width: 600px;
3
    p {
4
      margin: 0 0 1em;
5
    em {
6
      color: #f00;
7
    }
8
  }
9
  small {
10
    font-size: small;
11
  }
12
}

Sassファイルの更新を監視する（コンパイルする）

1
#main {
2
  width: 600px;
3
}
4
#main p {
5
  margin: 0 0 1em;
6
}
7
#main p em {
8
  color: #f00;
9
}
10
#main small {
11
  font-size: small;
12
}/*# sourceMappingURL=sample.css.map */

Live Sass Compilerの設定

アウトプットスタイル（フォーマット）を指定する

1
{
2
  "liveSassCompile.settings.formats": [
3
    {
4
      "format": "compressed",
5
    }
6
  ]
7
}

1
#main{width:600px}#main p{margin:0 0 1em}#main p em{color:red}#main small{font-size:small}/*# sourceMappingURL=sample.css.map */

拡張子を指定する

1
{
2
  "liveSassCompile.settings.formats": [
3
    {
4
      "format": "compressed",
5
      "extensionName": ".min.css",
6
    }
7
  ],
8
}

監視する場所を指定する

1
{
2
  "liveSassCompile.settings.forceBaseDirectory": "/sass",
3
}

ソースマップの生成を無効にする

1
{
2
  "liveSassCompile.settings.generateMap": false,
3
}

ベンダープレフィックスを自動で付与する

1
{
2
  "liveSassCompile.settings.autoprefix": [
3
    "> 1%",
4
    "last 2 versions"
5
  ],
6
}

サンプルコード一覧へ