LoginSignup
6
3

More than 5 years have passed since last update.

Sassのビルド時にCSSの出力形式を指定する

Last updated at Posted at 2018-09-28

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を使うと良い

6
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
3