how to use compass twitter bootstrap like compass blueprint - compass-sass

I have install the compass_twitter_bootstrap. i import it to my scss file like we import compass.
#import "compass";
#import "compass_twitter_bootstrap";
Importing compass is normal but while importing compass_twitter_bootstrap it overwrite all css in compiled css. Means all the css in bootstrap is imported to style.css. I want it to be work like compass file.
I am really noob in this compass and bootstrap. Any help will be greatly appreciated.

You might have to require it in your config.rb
require 'compass_twitter_bootstrap'

Related

import bootstrap-sass to scss file

How to import bootstrap-sass to scss file? without compass, without rails, without etc.
I just only have 2 files, .html and .scss (which later will be generated to css).
I know there's a lot questions how to import bootstrap-sass but everything use rails or compass
I already gem install bootstrap-sass, but I don't know what shall I do afterthat
In your .scss file
// Import Bootstrap Compass integration
#import "bootstrap-compass"
// Import custom Bootstrap variables
#import "bootstrap-variables"
// Import Bootstrap for Sass
#import "bootstrap"
make sure you give proper path to your .scss libraries of bootstrap. and the ordering of the inclusion is important.

How to use compass mixins in a project using 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

Include Susy with Nanoc

I'm trying to include Susy in my Nanoc project.
I followed the GitHub of ddfreyne. I installed Compass first and Susy next. Then, in my Gemfile I added the line: gem "susy".
In my stylesheet, I added #import "susy" Unfortunately, I have an error during the compilation which is Sass::SyntaxError: File to import not found or unreadable: suzy. I don't understand this error...
I'm using SASS to make my stylesheets.
I hope you'll be able to help me! Cheers.
The mistake was quite simple. I had to replace #import "suzy by #import "susy" in my stylesheet.

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.

Why do I get "Undefined mixin 'border-radius'" in Compass?

In my Compass the top file has lines which include necessary plugins:
#import "compass";
#import "rgbapng";
#import "compass/css3";
#import "config"; // file that has my variables
But during compilation of a file that has #include border-radius($box-radius-small); errors out saying Undefined mixin 'border-radius' and Undefined variable: "$box-radius-small". - both of which should be included already!
Can anyone please help with this issue?
PS my packages are:
Compass 0.12.2 (Alnilam)
Sass 3.2.7 (Media Mark)
Just place the following import at the top of your scss file
#import "compass/css3";
Features of css3 :: http://compass-style.org/examples/compass/css3/
There are many other imports available out there...and you can create your own if you find yourself re-using blocks of css often enough to warrant the extra effort.
Try to #import "compass" and your "config" variable sheet in every stylesheet that uses the mixins or variables.

Resources