Im following this tutorial to compile Sass with Gulp
https://www.youtube.com/watch?v=cg7lwX0u-U0
I think im doing the same as in the video but I get this error that I don't understand.
I don't want to compress it, I just want to compile all my .scss files to a single styles.css file, as I do with Compass.
You are using gulp-ruby-sass instead of the regular gulp-sass. gulp-ruby-sass does not use the gulp.src() command, instead you should give the path to it directly like this:
gulp.task('styles', function() {
sass('sass/_*.scss')
.pipe(gulp.dest('css/'));
});
Related
do I have to compile with compass in order to use it framework ?
is it possible to use compass framework and compile sass with an other tool like gulp ?
You can use gulp-compass to compile compass.
Main thing about compass vs sass is being able to use #include x(y); to get browser prefixes (at least from my experience). You could also use gulp-autoprefixer and gulp-sass to accomplish something similar.
I use .scss files (because I like semi-colons) but a sass builder with my gulp file:
gulp.task('sass', function() {
return gulp.src(settings.sass.input)
.pipe(sourcemaps.init())
.pipe(sass(settings.sass.options).on('error', errorLog))
.pipe(autoprefixer(settings.sass.autoprefixer).on('error', errorLog))
.pipe(sourcemaps.write(settings.maps, {
sourceMappingURL: file => {
return file.relative + '.map';
}
}))
.pipe(gulp.dest(settings.sass.output))
.resume();
});
I used to use compass, then it started taking 10-15 seconds to compile, and ended up switching back to just using sass (though with a .scss file type).
I've been using Compass to compile Sass in my project, but it is now deprecated and no longer maintained so I want to move away from using Compass. The project uses PHP and Laravel, so I would like to use Laravel Elixir for compiling the Sass files instead.
Is there a way to transfer my .scss files from Compass to Elixir without going in and changing all the places in my Sass code that I use Compass helpers, or do I need to more or less re-write my Sass files? There are a ton of them, so I would love to avoid that.
On the suggestion of my co-worker, what I tried was to add the compass files to my resources/assets/sass directory (includes compass/css3, compass/layout, compass/reset, compass/typography, and compass/utilities, as well as several other .scss files included in Compass. The hope was that by including these files, the functions of Compass would still apply outside of it.
When I try to compile with gulp, the error I'm currently getting (although I'm guess I'll run into another one once this is fixed) is:
>> Sass Compilation Failed: resources/assets/sass/compass/_support.scss
Error: Undefined operation: "prefix-usage(browser-prefixes(browsers()), css-transitions, (full-support: true), (partial-support: true)) gt 0.1".
on line 324 of resources/assets/sass/compass/_support.scss
>> #if $usage > $threshold {
------^
My guess is that I will need to go ahead and remove the Compass stuff from the Sass code manually, but I'm hoping someone else has a better solution for me! Thanks.
I've just started using Laravel 5.0 and noticed it comes installed with Gulp and it's own library called Elixir. Looks good, however I'm having trouble including libraries such as Susy and Breakpoint to run with it.
In a typical Gulp setup I would pipe it in my styles task like this using gulp-ruby-sass:
.pipe(sass({ style: 'compact', require: ['susy', 'breakpoint'], "sourcemap=none": true }))
However, I've been unable to do something similar with Elixir. Has anyone come across a solution for this?
Currently the Elixir style task in my gulp file is like so:
elixir(function(mix) {
mix.sass('main.scss');});
Any advice would be greatly appreciated.
Thanks!
You can pass in node-sass options as the third parameter.
elixir.extend('sass', function(src, output, options)
So something like...
elixir(function(mix) {
mix.sass('main.scss', undefined, {
outputStyle: 'compact'
});
});
It doesn't seem like susy CSS framework work out of the box with gulp-sass in elixir. I had to install the "laravel-elixir-compas" module (https://github.com/rynocouse/laravel-elixir-compass). The Compass extension to elixir allows you to use susy and breakpoint.
You just need to define the import in config.rb
require 'breakpoint'
require 'susy'
And then you should be good to go..
I had "Compass Compilation Failed!" error which I was able to fixed by simply specifying the options for compass.mix() (refer to https://github.com/rynocouse/laravel-elixir-compass for options)
Hope that helps anyone with a similar issue
sass input.scss:output.css
works well on my server, but the output is uncompressed.
Can I pass arguments to compress the css like the following?
sass input.scss:output.css =compressed
or sass input.scss:output.css minified
?
watch
is not supported on my server and there is no option to get it to work.
Instead, I have to manually compile the sass via the CLI statement on line 1 of this post
Thank you in advance!
You should be able to use the standard Ruby-style flags. Try this:
sass input.scss:output.css --style compressed
I have a directory of .scss files. I am using sass --watch src:public command to watch and compile files, that is working perfectly.
Is there any way to catch whenever there is an error ? Basically instead of going to terminal i want to produce a 'growl notification' whenever there is an error in compiling sass files.
Otherwise a way to detect change in bash output and just create a growl notification of it. It would be really helpful for me.
Yes you can use sass linter like sass lint to catch MOST of them
on top of that you can use IDE plugin as well, for example atom plugin
atom lint error demo