compass install bootstrap does not support easy customization #71

bburton opened this Issue Feb 20, 2012 · 7 comments


None yet

3 participants



The way the original twitter bootstrap distribution is organized, it's expected one can customize various aspects of it. In this case, the files would normally be copied into a project and could be readily edited if necessary. However, with the packaging of the SCSS files in a gem, they are not available for modification.

Modification of Variables

The settings in bootstrap/_variables.scss are expected to be modified. An easy way to expose the variables would be to use the compass templating to copy the contents of _variables.scss into the generated styles.scss before the @import "bootstrap" while possibly removing the !default notation. Any change to a variable made by a user would override the same variable in _variables.scss when imported.

Modification to Imported Mixin's

For applications that won't use various bootstrap mixin's it would be ideal if _bootstrap.scss was locally editable so such mixin's could be commented out.


Work around to copy bootstrap/_variables.scss into styles.scss

  1. Cd into the sass_dir location specified in your compass config.rb
  2. Copy bootstrap/_variables.scss out of the gem and append to styles.scss (one long line): $ cat $(dirname $(gem which bootstrap-sass))/../vendor/assets/stylesheets/bootstrap/_variables.scss | sed 's/ !default//' >> styles.scss
  3. Edit styles.scss and move @import "bootstrap" and @import "bootstrap-responsive" to the end of the file.
  4. Make any other desired edits to the variables.

Work around to copy _bootstrap.scss from gem

  1. Cd into the sass_dir location specified in your compass config.rb
  2. Copy _bootstrap.scss out of the gem into local stylesheet directory: $ cp -p $(dirname $(gem which bootstrap-sass))/../vendor/assets/stylesheets/_bootstrap.scss .
  3. Edit _bootstrap.scss and comment out any @import's for mixin's that aren't needed.
Bootstrap member

The README contains a link to Bootstrap's variable list and gives instructions on how to modify them. Copying the entire variables file seems unnecessary - most people will only want to configure a few variables.

The import helper I agree with, to an extent. It was something I began developing when bootstrap-sass only supported Rails but I abandoned it due to issue with how sass-rails looks at load paths. However, once #70 gets fixed, I think unpacking will be the 'supported' way to customise bootstrap-sass with compass - then you have total control over all customisation.


OK, Rather than copying all the variables it would be helpful to have links to the relevant information. Someone maintaining an application may not be familiar with bootstrap-sass or bootstrap for that matter. Is this more reasonable for styles.scss?

// See
// for information on this SASS implementation of Twitter Bootstrap.

// Add any bootstrap variables below to override the defaults.
// Complete list at
// Links
//$linkColor: #08c;
//$linkColorHover: darken($linkColor, 15%);
// Typography
//$baseFontSize: 13px;
//$baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
//$baseLineHeight: 18px;
//$textColor: $grayDark;
// Default 940px grid
//$gridColumns: 12;
//$gridColumnWidth: 60px;
//$gridGutterWidth: 20px;

// I gather this file is a starting point for the project.
@import "bootstrap";

// Include responsive Bootstrap styles
// @import "bootstrap-responsive";// Variables.less


It would be really helpful to have an installer. A website I'm working is past the "bootstrap phase" and needs full customization of bootstrap styles.

Not needing to customize files directly is great for starting off, but there comes a point where you need to edit the files directly.


Once issue #70 has been addressed, after compass install, you will be able to do a compass unpack bootstrap to extract all the files locally. I may have a fix for #70 but I want to test some more.

Bootstrap member

(probably) fixed in #345

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment