How to use compass mixins in a project using Sass - sass

ColorZilla's gradient editor says
// needs latest Compass, add '#import "compass"' to your scss
Well I've found that's not so easy. Obviously if you just throw #import "compass"; at the top of your .scss file, Sass won't compile because _compass.scss can't be found.
This is an asp.net project utilizing Sass. In addition, I have to use the sass ruby gem to compile, not compass's compiler.
I've installed the compass gem. I've followed the instructions on http://compass-style.org/install/. I've run compass init, compass create, compass install. None of them even give me compass's mixins.
I expected this to work like bourbon, though I know this isn't compass's primary goal.
What am I missing?

Install the library
bower install compass-sass-mixins
Import the compass into your SASS file
#import "bower_components/compass-sass-mixins/lib/compass"
Checkout SASS function list:
https://github.com/askucher/compass-sass-mixins

Related

How to work with SASS in different project?

While I was learning SASS, I have learned how to install SASS and dev-dependencies using npm package.
Now I want to work on my own project, so how should I work with SASS ?
Do I have to install SASS again ?
If not then how to use existing sass in my project and also the other dependencies like concatenation, auto pre-fixer. Especially when they are updated.

Can`t make susy start working

I wanted to start a project with Sass / Compass and for grid I want to use susy.
Installed sass -v 3.4.24
Compass 1.0.3
All good and working. After I installed susy 3.0.6 and not working then I tried 2.2.12, and use the simple code body { #include container(80em); }
I get the Undefined mixin 'container' all the time.
What do i do wrong?
I don't recommend using Compass, since it is no longer maintained and Susy 3 no longer supports it. With Susy 2, it should work, but you will have to require and import Susy before it will work. Installing is not enough.
There are some brief instructions in the Susy docs.
Specifically, those commands add a require 'susy' line to the compass config, and an import 'susy' line in the Sass/Scss.
Since Compass is no longer maintained, I'm a bit fuzzy on exactly how the config/require is supposed to look.

Importing Compass styles with Sass using Yeoman

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.

How to add compass/utilities to the load paths (compass + sass + netbeans)

I am trying to use the sass plugin of Netbeans, my .scss file require the compass library. It work well from the commad line:
compass compile
but in the Netbeans IDE I get the following error:
Sass::SyntaxError: File to import not found or unreadable: compass/utilities.
The load paths listed don't show the compass library.
How can I include the compass library to make the .scss compile in Netbeans?
Mac OSX, Netbeans 7.2, SASS 3.1.20, Compass 0.12.2
If you are using netbeans 4.7 and the builtin css compiler you can add --compass to the sass commandline options. Make sure you have ruby in your PATH. Also make sure you have your config.rb in the root of the project.

Force Compass to use .sass syntax?

Is there a way to force Compass to use the Sass syntax instead of SCSS?
For new projects, run:
compass create path/to/project --syntax sass
to generate .sass files using Sass syntax inside the sass folder. The --syntax option and others are listed when you run compass --help.
For existing projects, add the following to your Compass config.rb:
preferred_syntax = :sass
That's covered in the Compass configuration reference. And you'll want to run your existing SCSS files through sass-convert to generate new ones which use Sass syntax.

Resources