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.
Related
Can anyone please help explain this? I am new at using Sass. But I cant understand why people use compiler for sass files when they can be run through terminal.
I actually had the same question some time ago when I was learning SASS.
I kept wondering why most tutorials involved using GRUNT / GULP or some kind of task runner when there where sass proprietary commands even for live-watching your files with a command such as:
sass --watch app/sass:public/stylesheets
I will quote myself here in the question (that no one answered) just to share my experience with SASS compiling:
Grunt: using grunt-contrib-sass - Everything has worked smoothly; I chose this one over grunt-sass for no particular reason, but I've read that the latter uses libsass(c++) which is faster than the traditional ruby Sass.
Gulp: using gulp:sass - I often encounter an error when watching
files, it doesn´t find some partials, but if you save again,
everything is fine (this is addressed in their common issues -this
solution hasn't worked for me though), also it doesn't generate sass
maps as a default you have to use gulp-sourcemaps on top.
Straight from Console: no task runners - Works fine so far, generates
sourcemaps, and lets you know where there's an error, just like with
Grunt and Gulp.
So after working on different projects using SASS I'd say the reasons are:
Tutorials popularized the use of task runners when using SASS in its early times
In a project, you rarely use SASS just by itself, you most likely want to run other tasks, so it makes sense to add your SASS task to the flow, which saves time and makes sense.
It's easier to run a simple command such as gulp sass or just gulp to run the default gulp task (that should include the sass task) than to remember a long command in which you have to put the paths over and over again.
After a while I realized that you can use NPM scripts in your package.json to run the SASS command line tools like so:
"scripts": {
"sass": "sass --watch app/sass:public/stylesheets --style compressed"
},
And then run it from the command line: npm run sass
the above requires no configuration and you don't have to remember the whole command by heart.
To conclude, there is nothing wrong in using the CMD SASS without other compilers/task runners, just use whatever you feel most comfortable with.
Iam trying SassyStudio für Visual Studio to compile the SASS in our project - but there area some issues.
The project is structured like this:
Solution
- Project 1
-- Areas
--- Area 1
---- Styles
----- style.scss
------ style.css
--- Area 2
---- Styles
----- style.scss
------ style.css
-- Styles
--- globalstyle.scss
---- glogalstyle.css
As you can see the scss files are scattered all around the project. The css Files should be compiled beside the scss files. Since there are compass references within the scss files there are dependencies to compass.
Mindscape Web Workbench is not designed to work like this.
I installed Ruby + gem sass + gem compass and
sass --watch C:/compasstest:C:/compasstest --compass
works well. But I dont like to start a batch everytime I start developing.
So I found SassyStudio an it pretty looks like what I need. But there are some issues with the compass references. In the options I entered "C:\Program Files (x86)\Ruby193\bin" to Ruby Install Path and "C:\compass" to the Include Paths property. The Compass Folder contains for example the "compass/css3" structure from github.
12:00:52.447 : Failed to compile css.
[SassCompileException]c:\compass/compass/css3/shared:1: error: file to import not found or unreadable: "compass/support"
at NSass.SassCompiler.CompileFile(String inputPath, OutputStyle outputStyle, Boolean sourceComments, IEnumerable`1 additionalIncludePaths)
at SassyStudio.Integration.LibSass.NSassDocumentCompiler.Compile(FileInfo source, FileInfo output)
at SassyStudio.Editor.GenerateCssOnSave.GenerateCss(DateTime time, String path)
12:00:52.447 : Compile complete.
What exactly is Ruby Install Path for?
Do I need the config.rb even if I dont want so specifiy specifiy sass and css folder?
How can I tell SassyStudio to find the file compass/support (It already found compass/shared as we can see)?
OK, so the sass --compass is new to me, so I don't know if I can comment on that.
Here is what you want to do.
First, change your ruby path to this C:\Program Files (x86)\Ruby193 as you don't need the bin directory in there (and not sure if it would cause issue or not).
Next, for me to detect that you are using compass (vs sass gem), I look for the config.rb file, and I believe that compass requires this to work as well, but not exactly sure on that. For me though, I definitely need it.
Now, what happens when you save a file is that I go looking for that config.rb from the current directory upward, so I believe that you can achieve what you are wanting to do through the use of multiple compass.rb files. So, that means if you put one in Area 1, one in Area 2, and one in Styles, I think it will work (but I've never tried).
I'm a bit unfamiliar with the syntax of compass.rb but I'm sure you will be able to figure out something that works there. That file may need to go into the Styles folder instead of root folders, I don't remember for sure (I think styles is perhaps configured in config.rb).
Let me know if you need anymore help.
A while ago I was using compass to generate stylesheets from sass for a project.
Recently I returned to that project. I went to my sass directory and did "compass watch --debug .:."
This generated the error "You must compile individual stylesheets from the project directory".
I discovered that there was no config.rb in the directory. So I recreated one. It looks like this:
http_path = "/"
css_dir = "/css"
sass_dir = "/css"
images_dir = "/img"
javascripts_dir = "/js"
preferred_syntax = :sass
However, all of my attempts to use compass result in the same error, no matter what values I put in the config.
How do I get compass to actually process my sass?
just came across this problem too, and it has already been answered in the comment by Arnaud Valle.
But just for clarity, and people later searching.
Just creating a config.rb will not work, as compass does not recognise it.
The answer is just switch to your project directory(root) and then run
compass init
This will then create you a "working" config.rb, and two directories called sass, and stylesheets, in the sass directory will be a couple of start scss files.
If you do not want them, or want to use different directories, you can of course now edit your freshly created and working config.rb, and change your directories (and then delete the old automatically created ones)
Oh and i suspect your js will not be in a folder javascripts, so edit that to in the config.rb
Anyway having done that(or not) you should then be able to run
compass watch
and all should be good , i.e. your scss files get compiled to css files
As an alternative that I have not tried, but theoretically
compass compile [path/to/scss]
should work too, if you don't want to init compass
More information to be found in the compass documentation here
and to go completely over the top, if this is something you find yourself doing often, and hate the defaults then edit/add the following to your ~/.bash_profile
alias compass_init="compass init --syntax=sass --css-dir=css --javascripts-dir=js"
I usually have my config.rb in my project directory (or root) rather than the sass directory.
Folder structure would be like this:
config.rb
--- css
--- sass
Also your css_dir and sass_dir have the same value, which could lead to your issue as well.
Remove the "/" in front of your directory names.
This error occurs when your source path is incorrect. In your case, your directories have an extra "/". Removing them should fix your problem.
As others have said, creating a config.rb with compass init will fix it too.
Note that Config.rb is not necessary when using Grunt or similar runners that run compass. That might be how your project was running before without the config.rb file. The runner starts compass with all the paths and options in Gruntfile.js. Having paths/options in both Gruntfile and config.rb might cause problems.
Had this problem on windows 7 using Symfony with Gulp, i solved it using absolute paths like this:
gulp.task('compass', function() {
gulp.src('c:/wamp/www/mnv/src/Mnv/Bundle/MnvBundle/Resources/public/sass/*.scss')
.pipe(compass({
config_file: 'c:/wamp/www/mnv/src/Mnv/Bundle/MnvBundle/Resources/public/config.rb',
css: 'c:/wamp/www/mnv/src/Mnv/Bundle/MnvBundle/Resources/public/stylesheets',
sass: 'c:/wamp/www/mnv/src/Mnv/Bundle/MnvBundle/Resources/public/sass'
}))
.pipe(gulp.dest('c:/wamp/www/mnv/web/css'));
});
For anyone looking to compile SCSS without making a whole project (e.g., for a one-off page), you can just create a config.rb, but it needs at least two parameters: css_dir and sass_dir. (touch-ing it is not enough).
A minimal config.rb:
css_dir='.';sass_dir='.'
This effectively creates a compass project for the purpose of compiling simple files. You'll have to include the rest of the params if you want to use sprites, etc. Assuming compass can write to the directory, it'll create the .sass-cache directory once you run compass compile or compass watch for the first time.
It's also important to note that compass commands must be run from the directory with config.rb, or you'll get this error.
Finally, if you just want to take advantage of simple SASS features (and not Compass framework components), straight SASS is often simpler:
sass --watch foo.scss:foo.css
I experienced the same problem using gulp-compass-compile. Fixed that by changing srcDir option (that converts to --sass-dir option in compass compile call) for compass function from ./src/scss to src/scss. Hope that helps someone.
I created a project using yo webapp (with the generator-webapp installed obviously).
Everything is fine, but I'm still missing something. I'm sure it's such an easy answer that I'll never come back to SO because I'll be too embarrassed.
I want to use Compass, which comes out of the box with Yeoman, but I don't know how. I mean, obviously #import "compass...etc" inside any Sass files won't work since inside app/bower_components (the default path for Sass #imports specified inside Gruntfile.js) there's no compass directory.
What should I do now in order to import Compass stylesheets?
You can use compass just as you would usually do. If you set up a vanilla compass project with compass create, there is compass folder either. If you want to use any of the helpers compass ships with, you can import them just as described in the documentation, e.g.
#import "compass/css3";
.mybox {
#include box-shadow(red 2px 2px 10px);
}
main.scss
You would have to install grunt task for compass with npm install grunt-contrib-compass and adjust your Gruntfile.js to add a task for compass compilation.
It may appear not that easy since it has some tricky parts like to compile your sass to .temp/main.css to use for testing/livereload, and then minify it into your dist when doing final build.
The most easy way might be to just try another generator that has compass in a separate directory. For example angular generator has compass and even bootstrap for compass. It's pretty cool.
On the Susy Getting Started page, there's a section marked 'Manual Start', which says :
"You can use this method if you're not using Compass from Terminal and/or Rails".
It then explains how to copy Susy's Sass definitions and #import "susy", after which (it claims), "you're good to go".
I'm trying to use Susy as part of my own build system, which uses the 'sass' command-line command to compile my stylesheets. Obviously, the Susy Sass mixins and includes depend on Compass, so I extracted the Compass Sass definitions from the Compass distribution, and put them where they could be accessed by Susy. I then tried to compile my stylesheets with:
sass -I scss/compass scss/foobar.scss ${CSSDIR}/foobar.css
When I do this, Susy throws a warning:
"You need to provide either a valid layout (number of columns) or a valid media-query min-width breakpoint (length)".
Digging into the code, it appears that the issue is that Susy calls the 'compact' function provided by Compass. The actual call is something like:
compact(false,false,false,...)
which - I presume - should evaluate to:
false
But 'compact' isn't a Sass feature; it's a Compass function, implemented in Ruby as part of Compass. If Compass's Ruby extensions aren't available, that call is left unchanged, so the Susy mixin is getting handed:
compact(false,false,false,...)
which is not 'false' ... and so things go pear-shaped. (The trouble happens at line 93 of susy/_grid.scss).
It looks to me as if using Susy without Compass is not actually possible. What's my best solution to this issue? Do I just use 'compass compile ...'instead of 'sass' to compile my stylesheet? Or can I somehow provide the 'compact' function to 'sass' in some other way?
You can add this function yourself, though I really recommend using Compass. All it requires is a config.rb file so that Compass knows where files are supposed to live for various helper functions. The command for compiling with Compass is more compact since the output location is already defined in the config file: compass watch or compass compile
If you don't want to use Compass, you can add the function yourself. First you'll need the custom function, which comes from here: https://github.com/chriseppstein/compass/blob/stable/lib/compass/sass_extensions/functions/lists.rb#L18
def compact(*args)
sep = :comma
if args.size == 1 && args.first.is_a?(Sass::Script::List)
list = args.first
args = list.value
sep = list.separator
end
Sass::Script::List.new(args.reject{|a| !a.to_bool}, sep)
end
Place it in a ruby file wherever makes sense.
Your sass command now just needs to add this flag: -r ./path/to/functions.rb