postcss-cssnextといういプラグインをサイトの説明通りに入れたのですが、これは、
下記一覧のきのう すべてがパッケージになっていると考えてよろしいでしょうか?
下記のようにCSSのネストを試したのですが、トランスパイルしてもうまくいきませんでした。
・CSS
.logo { color: var(--brand-color); width: 3rem; .button { size: 4rem 5rem; } }
・ある機能(足りないおすすめの機能はありますか?)
http://cssnext.io/より
automatic vendor prefixes custom properties & var() reduced calc() custom media queries media queries ranges custom selectors nesting color() function hwb() function gray() function #rrggbbaa colors rgba function (rgb fallback) rebeccapurple color font-variant property filter property (svg fallback) initial value rem unit (px fallback) :any-link pseudo-class :matches pseudo-class :not pseudo-class (to l.3) ::pseudo syntax (: fallback) overflow-wrap property (word-wrap fallback)
//gulpfile.js
var gulp = require('gulp'); //gulpをインポート var postcss = require('gulp-postcss'); //gulp-postcssをインポート var cssnext = require('postcss-cssnext'); //cssnextをインポート gulp.task('css', function () { //”css”タスクを登録 var plugins = [ cssnext //一旦空の配列を作成 ]; return gulp.src('./src-before/*.css') //src-before下にある.cssファイルを指定 .pipe(postcss(plugins)) //PostCSSにファイルを処理してもらう .pipe(gulp.dest('./dest-after')); //生成されたCSSをdest-after下に配置 });
これはセットなので、POSTCSSで必要なものだけ入れるよりはだいぶ重いのでしょうね。
あなたの回答
tips
プレビュー