When I was young I experimented with CSS, and then after a while my peers pressured me into trying SASS. It's been a slippery slope and the pushers have now got me onto Compass.
I don't really understand the difference between the following two commands
sass --compass --watch .
compass watch .
As I was having problems with the first command, I tried setting up a Compass project and using the 2nd.
However, this dies saying "Undefined mixin 'background-image'". I can get that error to go away by adding an #import "compass"; at the top of my .scss file. But why would I have to import compass when I'm running the compass command itself?(!) Surely all the libraries are included there? Obviously not.
Any help gratefully received.
The --compass flag for the sass command is only intended to be a quick way to access the Compass library. If you actually need to configure Compass, then it is recommended that you setup a Compass project and use the compass command (see: https://github.com/nex3/sass/issues/858).
Compass is more than just a collection of mixins for prefixed properties. It is an extension manager that happens to have a few extensions by default (compass, blueprint, etc). Using Compass only grants you access to the helper functions (which are written in Ruby) by default. This is by design: you include only the items you need, not what Compass thinks you need.
Related
The Susy documentation says:
The only requirement is Sass, but Susy was built to be part of the Compass ecosystem, and we recommend pairing with tools like Breakpoint and Vertical Rhythms.
Of course if you want to use the recommended Vertical Rhythms, which is part of Compass, you're dependent on Compass.
But other than using the functions/mixins Compass provides, are there any reasons why I would want to use Compass with Susy? Are there parts of Susy that only work, or work better, when Compass is available?
For example, in the file _breakpoint-plugin.scss you see that Susy actively checks if the Breakpoint Plugin is available, and changes its behavior accordingly. I want to know if there are similar optional dependencies on Compass built in.
PS, In reaction to the close vote:
I do not mean to ask for opinions. I want to know if there are features in the Susy codebase that do not work (or not as well) when Compass is not available. I will update the title to make that more clear. Please let me know if you see more ways to improve the question.
Check the custom support docs for all our integrations. Basically: we'll use Compass prefixing, clearfix, vertical rhythms, and rem fallback if you ask for them.
[...] are there any reasons why I would want to use Compass with Susy?
Yes, compass has some mixins and functions that aren't available in Susy. For example: sticky footer.
Are there parts of Susy that only work, or work better, when Compass is available?
As far as I'm concerned it doesn't. If you read it correctly you will see this:
The only requirement is Sass, but Susy was built to be part
of the Compass ecosystem, and we recommend pairing with
tools like Breakpoint and Vertical Rhythms.
This is for Susy 2, but for 1 however:
Compass is still required for the Susy One syntax.
I am trying out grunt-sass (instead of grunt-contrib-watch) to use the super speedy libsass compiler.
I've managed to get it working with compass by using a compass bower package. (https://github.com/Igosuki/compass-mixins) So the compass mixins are available. However I am getting the following error
error: only variable declarations and control directives are allowed inside functions
The error is pointing to an #if statement in one of my function calls (i've tried removing that function but it just then fails at the next #if statement).
If I omit my functions file I then get another error, pointing to one of my mixins
error: expected '{' in media query Use --force to continue.
Does anyone have any idea what's going on?
All of this stuff was working when using grunt-contrib-watch.
Thanks
With no actual sass file to look at I assume that you are using features that aren't implemented in libsass yet. To quote from the offical node-sass repo (on which grunt-sass) is based on:
The libsass library is not currently at feature parity with the 3.2
Ruby Gem that most Sass users will use, and has little-to-no support
for 3.3 syntax. While we try our best to maintain feature parity with
libsass, we can not enable features that have not been implemented in
libsass yet.
So I'm designing a website and I stumbled upon a nice tool for fluid design called Profound Grid. http://www.profoundgrid.com/
I thought it would be very useful and decided to use it, but I find the documentation is meagre at best, and there is little to no help around the internet, the website doesn't even have a contact us button...
The website said that the Profound Grid was created and is used with SASS.
I've installed ruby and SASS successfully and am able to use them just fine, but when I try to use the Profound Grid; which is done by importing a file into your style sheet, the SASS converter gives me an error:
error grid/_grid.scss (Line23: File to import not found or unreadable: compass/utilities/general/clearfix.)
The Profound Grid system uses only one file to function, which is imported into your style sheet, and that is the "_grid.scss", I opened it and found this on the 23rd line:
#import "compass/utilities/general/clearfix";
It appears the grid system imports and uses a file from compass...
To fix this problem I installed the compass gem but I still get the same error message, it cannot locate the clearfix file even though I should have it installed.
To test my compass installation I tried just importing compass like this:
#import 'compass';
An error came up telling me that compass couldn't be located either, so I think there might be something wrong with me compass installation or the way I am importing it.
Have I installed compass wrong?
Is there something wrong with the way compass is being imported? Perhaps the wrong path?
If there is anyone out there with experience with Compass, SASS or Profound Grid I would much appreciate some help.
You have to use the compass command-line tool to compile it. For example:
compass compile
Strange that this piece of software is not distributed as a Compass extension.
For sass currently I am using
sass --watch path1:path2
to compile scss file to css but i even found
compass watch path1:path2
also. Is there any difference between these two watches? I created a project with compass create project and found that there are two main folders called sass and stylesheets I looked to screen.scss file and I found the code #import "compass/reset";, but there isn't any directory called compass to call the reset.
I am really new to sass and compass. Can anyone explain me how to use compass? Any help will be greatly appreciated. Thanks in advance.
To understand the difference, you must first understand the difference between Sass and Compass.
Sass is a language which is an extension of CSS. It has built in math functions and adds the ability to add more functions and mixins - but it doesn't include any.
Compass is a framework for Sass. It adds additional functionality on top of Sass such as CSS3 mixins, layout helpers and other utilities. It also gives you the ability to add additional 3rd party frameworks into your project (called extensions).
So with that, the difference between the two are:
sass --watch will compile Sass files, but because it doesn't know anything about compass, it will just ignore it.
compass watch is just like the Sass command, only it knows about the additional Compass functionality. So when you import compass/reset - it knows what to import.
You can find a reference to all Compass' functionality here: http://compass-style.org/reference/compass/
At the top of each page it will show you which part of Compass to import. For example, here is the page about reset: http://compass-style.org/reference/compass/reset/
Just starting out with SASS and Compass.
I've been using a Mac App called CodeKit to compile and manage my Sass and Compass.
If I wanted to use a set of Sass Partials on multiple projects and ideally store these in a central location (for example my dropbox) is this possible?
Codekit has a really nice feature called Frameworks that lets you do this but this doesn't work once you start to use Compass as Compass is a framework in its own right.
Thanks in advance for any help.
Richard
Create a Compass extension and import it into your config.rbs.