postcssでsassの形式（っぽく）書く

#nodeでsass（っぽく）かく構造化されたcssを書く

1. nodeがインストールされている環境でnode-sassなどを使うと、他コンパイラのinstallが面倒（windowsだけかもしれないが
2. postcssを使うが、よく言われている、cssnextでの書き方をしらない人にとっては、少し記法が違うので新しく覚えるのが面倒。

ということから、どうにかしてnode onlyでsassの記法でcssをかけないかという事を考えてた。
非常に申し訳ないが、自分の環境（すでに.netがインストールされていたりといろいろ前提がある）なのでうまく行かなくても怒らないでください。

要望

要するにまとめると

1. 開発環境はwindowsです（会社ではそっちが主流）
2. sass的に書きたい
3. できればnodeのインストールのみですませたい
4. watchしてほしい（できれば
5. cssを圧縮してほしい

以下要望をまとめるとこんな感じ

とりあえずnodeで書くとしたらpostcssか
https://www.npmjs.com/package/postcss
そんでもってsassっぽくかけるのでprecssかな
https://github.com/jonathantneal/precss
これらを使ってやる。

gulpfile.js

var gulp = require('gulp'); // watch
var webserver = require('gulp-webserver'); // 非推奨になってしまったconnectの代わり
var browser = require("browser-sync"); // 反映があったらブラウザのリロードをしてくれる
var plumber = require("gulp-plumber"); // エラーハンドリング
var rename = require("gulp-rename"); // scss→css的なことをする
var postcss = require("gulp-postcss");

gulp.task('default', ['connect', 'watch']);

gulp.task('css', function () {
	var plugins = [
		require('postcss-nested'), // いらないかも
		require('precss')({ /* options */ }),
		require('cssnext'), // prefixほしい
		require('cssnano') // 圧縮
	];
	gulp.src("app/scss/**/*.scss")
		.pipe(plumber())
		.pipe(postcss(plugins))
		.pipe(rename({
			extname: '.css'
		}))
		.pipe(gulp.dest("app/css"))
		.pipe(browser.reload({stream:true}));
});

gulp.task('watch', function () {
	gulp.watch('app/**/*.scss', ['css']).on('change', browser.reload);
});

gulp.task('connect', function() {
	browser({
		notify: true,
		open: true,
		server: {
			baseDir: "./app"
		}
	});
});

フォルダ構成としては以下のとおり

app
├ css
└ scss

動かすにはdefaultでwatchとconnectを動かすので以下のとおり

gulp

test.scss

$icon-size: 10px;
$display-size: 20em;

%main-font {
	font-size: $display-size;
}

@define-mixin icon $name {
	width: $icon-size;
	&::after {
		content: "";
		background-url: url(/icons/$(name).png);
	}
}

th.division {
	@extend %main-font;
	margin-left: $icon-size;
}

.search {
	@mixin icon search;
}

test.css

th.division{font-size:20em;margin-left:10px}.search{width:10px}.search:after{content:"";background-url:url(/icons/search.png)}

とりあえずmixinとextendsはいけてるので、おそらく、precssに書いてある部分は問題無いだろうと思う(nestは書いてないけど行けました

最後に

本当にinstallが楽なのか……。.netとか消してから検証するのが一番なんだろうけど……。今丁度その環境がない。
ちょっと後でやってみます。