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

3978 ワード
CSS Sass gulp CSS テキストリンク

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 セレクタごとに１行にまとめて出力される
compressed 圧縮された状態で出力される

ちなみに

1.デフォルトの状態(orオプションを何も指定しない)でビルドすると出力形式はnestedになる
2.ファイル容量を少しでも抑えたい場合はcompressedを使うと良い

(七)剣指offerのFibonacci数列とその変形
Java言語ベースのString,StringBuffer,StringBulider