Compass CSS Framework - Using Bootstrap with SASS

Compass CSS framework - using Bootstrap with SASS

(I'm using .sass files in my answer, but it should apply to .scss files, too)

Isn't there a bootstrap.scss file that has all the mixins and everything else?

Yes, there is. Here's the generated styles.sass file:

// Import Bootstrap Compass integration
@import "bootstrap-compass"
// Import custom Bootstrap variables
@import "bootstrap-variables"
// Import Bootstrap for Sass
@import "bootstrap"

bootstap_variables refers to the generated _bootstrap-variables.sass file in your project tree, whereas bootstrap-compass and bootstrap are imported from the gem's stylesheets directory.

The latter imports all other Bootstrap files, including the grid:

// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset and dependencies
@import "bootstrap/normalize";
@import "bootstrap/print";
@import "bootstrap/glyphicons";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/code";
@import "bootstrap/grid";        # <-- here it is
...

Using Compass/Sass with another CSS framework

Any CSS file is valid scss if you change the extension, so I wouldn't get too caught up in the differences between those files. You can easily use Compass with any framework, and many frameworks have been ported to Compass for even better integration.

On the other hand, I think Compass changes the very idea of what a framework can/should be. CSS frameworks are difficult to maintain and use because CSS isn't built with framework abstraction in mind. The result is bloated, non-semantic API's that try to do everything, but cut corners along the way. You can do better.

Compass is built to facilitate the sharing of smaller, focused 'plugins'. Susy is one of those plugins, and there are many more. You'll notice Susy isn't like Foundation or Bootstrap: it only does grids, and it does them in a way that wouldn't be possible without Sass. That makes a large difference in the API possibilities. The same is true with many other plugins.

I use my own mix of Compass plugins to build a framework custom-suited to my needs. I recommend that you do the same. Don't write all your own code, but do find your favorite plugins to roll your own framework. Mine looks like this:

Always:

• compass
• susy
• modular scale
• breakpoint

As Needed:

• compass-rgbapng
• animate
• solarized (not a plugin, but easy to copy/paste)
• sassy-buttons
• many many more...

You get all the benefits of rapid-development, but much more control and better long-term code.

SASS/Compass: Reference Instead of Include

Not sure I fully understood what you asked.

But if you want some variables from base.scss to be included in other scss files, you can split your base.scss in two files:

• shared-vars.scss containing variables that will be included in
  optional scss files
• base.scss containg all other variables and mixins, and importing
  shared-vars.scss

Now you can import base.scss in your main scss files and only import shared-vars.scss in your optional scss files

How to use Bootstrap for Sass using Grunt.js and Compass?

I was able to get this working after having the same problem for so long using bootstrap-contrib-sass.

In your Gruntfile, specify the location of your compass and bootstrap-sass gems in the includePaths config variable:

options: {
    compass: true,
    includePaths: [
        '/var/www/.rvm/gems/ruby-2.1.1/gems/bootstrap-sass-3.1.1.0/vendor/assets/stylesheets',
        '/var/www/.rvm/gems/ruby-2.1.1/gems/compass-0.12.4/frameworks/compass/stylesheets'
    ],
    ...
}

Side note: you can run grunt with the grunt --verbose flag to dump extra information helpful for debugging.

What are Compass and Sass and how do they differ?

From Sass and Compass in Action, by Wynn Netherland, Nathan Weizenbaum, Chris Eppstein, and Brandon Mathis:

1.3 What is Compass?

Compass helps Sass authors write smarter stylesheets and empowers a community
of designers and developers to create and share powerful frameworks. Put simply,
Compass is a Sass framework, designed to make the work of styling the web
smooth and efficient. Much like Rails as a web application framework for Ruby,
Compass is a collection of helpful tools and battle-tested best practices for Sass.

(emphasis added)

SASS - Bootstrap 3 GRID and Navbar only - how?

I have only had luck importing it the entire suite of sass files, and then commenting out components I know I'm not using in the _bootstrap.scss. You may end up with more than you like to prevent errors.

From the bootstrap SASS github:

By default all of Bootstrap is imported.

You can also import components explicitly. To start with a full list
of modules copy _bootstrap.scss file into your assets as
_bootstrap-custom.scss. Then comment out components you do not want from _bootstrap-custom. In the application Sass file, replace @import
'bootstrap' with:

@import 'bootstrap-custom';

---

Related Topics