Node.js
Sass
postcss

postcssでsassの形式(っぽく)書く

More than 3 years have passed since last update.


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とか消してから検証するのが一番なんだろうけど……。今丁度その環境がない。

ちょっと後でやってみます。