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

nodeがインストールされている環境でnode-sassなどを使うと、他コンパイラのinstallが面倒（windowsだけかもしれないが
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とか消してから検証するのが一番なんだろうけど……。今丁度その環境がない。
ちょっと後でやってみます。

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

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

要望

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

最後に