gulp-css-scss's Introduction

gulp-css-scss

Gulp plugin for converting CSS to Scss, uses the css-scss module created by @jxnblk.

Installation

npm install --save gulp-css-scss

Usage

const gulp = require('gulp');
const cssScss = require('gulp-css-scss');

gulp.task('css-scss', () => {
  return gulp.src('my-file.css')
    .pipe(cssScss())
    .pipe(gulp.dest('scss'));
});

gulp.task('default', ['css-scss']);

Input

:root {
  --red: #f00;
}

.warning {
  color: var(--red):
}

@media (--breakpoint-small) {
  .sm-col-6 { width: 50% }
}

@custom-media --breakpoint-small (min-width: 40em);

.col-4 { calc( 4 / 12 * 100% ) }

Output

$red: #f00 !default;

.warning {
  color: $red;
}

$breakpoint-small: '(min-width: 40em)' !default;

@media #{$breakpoint-small} {
  .sm-col-6 { width: 50% }
}

.col-4 { ( 4 / 12 * 100% ) }

License

MIT

https://github.com/jxnblk/css-scss

Contributing

Fork it
Create your feature branch (git checkout -b my-new-feature)
Commit your changes (git commit -am 'Add some feature')
Push to the branch (git push origin my-new-feature)
Create new Pull Request

Crafted with <3 by John Otander (@4lpine).

This package was initially generated with yeoman and the p generator.

gulp-css-scss's People

Contributors

Stargazers

Watchers

gulp-css-scss's Issues

CssSyntaxError: <css input>:85:1: Unknown word

My stylesheet is valid, gulp task is basic (like in example) without any additional tasks, but converter throws this error:

[11:58:23] CssSyntaxError: <css input>:85:1: Unknown word
    at Input.error (C:\Projects\app\root\gulp\node_modules\postcss\lib\input.j
s:113:22)
    at Parser.unknownWord (C:\Projects\app\root\gulp\node_modules\postcss\lib\
parser.js:457:26)
    at Parser.other (C:\Projects\app\root\gulp\node_modules\postcss\lib\parser
.js:174:14)
    at Parser.loop (C:\Projects\app\root\gulp\node_modules\postcss\lib\parser.
js:81:26)
    at Function.parse (C:\Projects\app\root\gulp\node_modules\postcss\lib\pars
e.js:26:16)
    at module.exports (C:\Projects\app\root\gulp\node_modules\css-scss\index.j
s:11:22)
    at DestroyableTransform._transform (C:\Projects\app\root\gulp\node_modules
\gulp-css-scss\index.js:21:15)
    at DestroyableTransform.Transform._read (C:\Projects\app\root\gulp\node_mo
dules\readable-stream\lib\_stream_transform.js:159:10)
    at DestroyableTransform.Transform._write (C:\Projects\app\root\gulp\node_m
odules\readable-stream\lib\_stream_transform.js:147:83)
    at doWrite (C:\Projects\app\root\gulp\node_modules\readable-stream\lib\_st
ream_writable.js:347:64)