CSSの出力形式を変えたい・・・><。
調べてみたところ、どうやらビルド時にオプションとしてCSSの出力形式を指定することが出来るらしい。
デフォルト以外の出力形式を指定したい場合はgulpfile.jsを編集してあげればいいっぽい。
gulpfile.js
"use strict";
var gulp = require("gulp");
var sass = require("gulp-sass");
gulp.task("sass", function() {
gulp
.src("./_src/sass/**/*.scss")
.pipe(sass({ outputStyle: "expanded" })) //" "に出力形式を指定
.pipe(gulp.dest("./css"));
});
gulp.task("watch", function() {
gulp.watch("./_src/sass/**/*.scss", ["sass"]);
});
gulp.task("default", ["watch"]);
主な出力形式
出力形式 | 出力結果 |
---|---|
nested | ネストの状態が表現された形で出力される |
expanded | 一般的なCSSのフォーマットで出力される |
compact | セレクタごとに1行にまとめて出力される |
compressed | 圧縮された状態で出力される |
ちなみに
1.デフォルトの状態(orオプションを何も指定しない)でビルドすると出力形式はnestedになる
2.ファイル容量を少しでも抑えたい場合はcompressedを使うと良い