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).
Related
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.
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/'));
});
I use sass (triggered by a gulp task) to generate my css files. I recently formatted my computed and this task stopped working.
var sass = require('gulp-ruby-sass');
var config = require('../config');
gulp.task('styles', ['copy'], function() {
gulp.src(config.sources.sass)
.pipe(sass({ style: config.isProduction ? 'compressed' : 'expanded' }))
.pipe(gulp.dest(config.build.cssDir));
});
This task used to work fine before I reinstalled my OS (Windows 8.1). Now after I run this task there is no visible errors, but no css files are created.
So, the question is:
Why did my gulp task stopped generating my css files?
Your gulp task is fine.
gulp-ruby-sass uses, by default, the gem sass to compile your scss files. Since you recently formatted your computer I bet you installed the last version of Ruby Installer for Windows. I made some tests and I noticed that sass doesn’t seem to work on Windows while using Ruby 2.2.2. The sass gem works just fine on Ruby 2.2 on Ubuntu and OS X.
If that’s an option, I suggest that you downgrade from Ruby 2.2.x to Ruby 2.1.6 and that should fix your problem.
In case it doesn’t you could use gulp-debug to check your stream and start from there.
gulp.task('styles', ['copy'], function() {
gulp.src(config.sources.sass)
.pipe(debug({title: 'Before sass:'}))
.pipe(sass({ style: config.isProduction ? 'compressed' : 'expanded' }))
.pipe(debug({title: 'After sass:'}))
.pipe(gulp.dest(config.build.cssDir));
});
If you can't downgrade your ruby version, you could use gulp-sass instead of gulp-ruby-sass. Gulp sass doesn't require ruby at all, as it uses a wrapper made in node for a C/C++ library - libsass.
You could also edit your post and include your gulp-ruby-sass version (or your package.json) and also your nodejs version.
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
Up to now I have used codekit to compile sass also it has the auto reload feature. Now because I wanted to take advantage of sourcemaps with sass, I needed to use the terminal instead of codekit to compile sass
sass --watch --sourcemap --compass sass:stylesheets
This is because codekit does not support sourcemaps. Is there any app of script I could use to auto reload the browser when sass compiles?
Thanks