Commit 5366a662 authored by Thomas Park's avatar Thomas Park
Browse files

Merge pull request #361 from guru-digital/merge-upstream

Add support for SASS/SCSS
parents 3f867ba1 28bd7c07
......@@ -4,3 +4,4 @@ node_modules
module.exports = function (grunt) {
......@@ -28,7 +29,7 @@ module.exports = function (grunt) {
clean: {
build: {
src: ['*/build.less', '!global/build.less']
src: ['*/build.less', '*/build.scss', '!global/build.less', '!global/build.scss']
concat: {
......@@ -118,6 +119,40 @@ module.exports = function (grunt) {
compress ? 'compress:'+lessDest+':'+'<%=builddir%>/' + theme + '/bootstrap.min.css':'none']);
grunt.registerTask('build_scss', 'build a regular theme from scss', function(theme, compress) {
var theme = theme == undefined ? grunt.config('buildtheme') : theme;
var compress = compress == undefined ? true : compress;
var isValidTheme = grunt.file.exists(theme, '_variables.scss') && grunt.file.exists(theme, '_bootswatch.scss');
// cancel the build (without failing) if this directory is not a valid theme
if (!isValidTheme) {
var concatSrc;
var concatDest;
var scssDest;
var scssSrc;
var files = {};
var dist = {};
concatSrc = 'global/build.scss';
concatDest = theme + '/build.scss';
scssDest = '<%=builddir%>/' + theme + '/bootstrap.css';
scssSrc = [theme + '/' + 'build.scss'];
dist = {src: concatSrc, dest: concatDest};
grunt.config('concat.dist', dist);
files = {};
files[scssDest] = scssSrc;
grunt.config('sass.dist.files', files);
grunt.config('', 'expanded');
grunt.config('sass.dist.options.precision', 8);
grunt.config('sass.dist.options.unix-newlines', true);['concat', 'sass:dist', 'prefix:' + scssDest, 'clean:build',
compress ? 'compress_scss:' + scssDest + ':' + '<%=builddir%>/' + theme + '/bootstrap.min.css' : 'none']);
grunt.registerTask('prefix', 'autoprefix a generic css', function(fileSrc) {
grunt.config('autoprefixer.dist.src', fileSrc);'autoprefixer');
......@@ -132,18 +167,78 @@ module.exports = function (grunt) {['less:dist']);
grunt.registerTask('compress_scss', 'compress a generic css with sass', function(fileSrc, fileDst) {
var files = {}; files[fileDst] = fileSrc;
grunt.log.writeln('compressing file ' + fileSrc);
grunt.config('sass.dist.files', files);
grunt.config('', 'compressed');['sass:dist']);
grunt.registerMultiTask('swatch', 'build a theme', function() {
var t =;'build:'+t);
grunt.registerTask('swatch_scss', 'build a theme from scss ', function (theme) {
var t = theme;
if (!t) {
for (var t in grunt.config('swatch')) {'build_scss:' + t);
} else {'build_scss:' + t);
grunt.event.on('watch', function(action, filepath) {
var path = require('path');
var theme = path.dirname(filepath);
grunt.config('buildtheme', theme);
grunt.registerTask('server', 'connect:keepalive')
* Regex borrowed form
* */
grunt.registerTask('convert_less', 'Convert less to scss using regular expression', function () {
var convertBaseDir = '';
grunt.file.expand(convertBaseDir + '*/*.less').forEach(function (lessFile) {
if (lessFile !=="global/build.less"){
var srcContents =;
var out = srcContents
// 1. replace @ with $
.replace(/@(?!import|media|keyframes|-)/g, '$')
// 2. replace mixins
.replace(/[\.#](?![0-9])([\w\-]*)\s*\((.*)\)\s*\{/g, '@mixin $1($2){')
// 3. In LESS, bootstrap namespaces mixins, in SASS they are just prefixed e.g #gradient > .vertical-three-colors becomes @include gradient-vertical-three-colors
.replace(/[\.#](?![0-9])([\w\-]*)\s>\s\.(.*;)/g, '@include $1-$2')
// 4. replace includes
.replace(/[\.#](?![0-9])([\w\-].*\(.*;)/g, '@include $1')
// 5. replace no param mixin includes with empty parens
.replace(/@include\s([\w\-]*\s*);/g, '@include $1();')
// 6. replace extends .class; @extend .class;
.replace(/(\.(?![0-9])([\w\-]+);)/g, '@extend $1')
// 7. replace string literals
.replace(/~"(.*)"/g, '#{"$1"}')
// 8. replace interpolation ${var} > #{$var}
.replace(/\$\{(.*)\}/g, '#{$$$1}')
// 9. replace spin to adjust-hue (function name diff)
.replace(/spin\(/g, 'adjust-hue(')
// 10. replace bower and imports in build.scss
.replace(/bootstrap\/less\//g, 'bootstrap-sass-official/assets/stylesheets/')
.replace(/\.less/g, '');
var baseDirRegex = new RegExp("^" + convertBaseDir, "g");
var sassFile = lessFile.replace(baseDirRegex, '').replace(/\.less$/, '.scss').replace(/(bootswatch|variables)/, '_$1');
grunt.file.write(sassFile, out);
grunt.log.writeln('Converted less file: ', lessFile, Array(27 - lessFile.length).join(' '),'> ', sassFile);
grunt.registerTask('server', 'connect:keepalive');
grunt.registerTask('default', ['connect:base', 'watch']);
exclude: ["src", "node_modules", "bower.json", "bower_components/font-awesome/src", "composer.json", "package.json", "", "LICENSE", "Gruntfile.js", "Gemfile"]
include: ["_bootswatch.scss","_variables.scss"]
......@@ -32,7 +32,8 @@
"dependencies": {
"bootstrap": "~3.3.0"
"bootstrap": "~3.3.0",
"bootstrap-sass-official": "~3.3.1"
"devDependencies": {
"font-awesome": "~4.0.0",
"name": "bootstrap-sass",
"version": "3.3.1",
"homepage": "",
"authors": [
"Thomas McDonald",
"Tristan Harward",
"Peter Gumeson",
"Gleb Mazovetskiy"
"description": "bootstrap-sass is a Sass-powered version of Bootstrap, ready to drop right into your Sass powered applications.",
"main": [
"keywords": [
"license": "MIT",
"ignore": [
"dependencies": {
"jquery": ">= 1.9.0"
"_release": "3.3.1",
"_resolution": {
"type": "version",
"tag": "v3.3.1",
"commit": "cdad0d4b5d17e6bc84863b2907b82d45e856be22"
"_source": "git://",
"_target": "~3.3.1",
"_originalSource": "bootstrap-sass-official"
\ No newline at end of file
# Changelog
* Variables override template at templates/project/_bootstrap-variables.sass
* Readme: Bower + Rails configuration
* Fix loading issue with the ruby gem version
## 3.3.0
* Improve libsass compatibility
* Support using Bower package with Rails
Main bootstrap file is now a partial (_bootstrap.scss), for compatibility with Compass 1+.
Fixed a number of bugs. [Issues closed in v3.2.0.2](
Fixed a number of bugs: [Issues closed in v3.2.0.1](
- Assets (Sass, JS, fonts) moved from `vendor/assets` to `assets`. `bootstrap.js` now contains concatenated JS.
- Compass generator now copies JS and fonts, and provides a better default `styles.sass`.
- Compass, Sprockets, and Mincer asset path helpers are now provided in pure Sass: `bootstrap-compass`, `bootstrap-sprockets`, and `bootstrap-mincer`.
Asset path helpers must be imported before `bootstrap`, more in Readme.
- Sprockets / Mincer JS manifest has been moved to `bootstrap-sprockets.js`.
It can be required without adding Bootstrap JS directory to load path, as it now uses relative paths.
- Sprockets: `depend_on_asset` (`glyphicons.scss`) has been changed to `depend_on` to work around an issue with `depend_on_asset`.
[More information](
- Updated Bower docs
- #523: Rails 3.2 compatibility
- Bugfixes from upstream up to 7eb532262fbd1112215b5a547b9285794b5360ab.
- #518: `scale` mixin Sass compatibility issue
* compiles with libsass master
* fix vendor paths for compass
* Fully automated (lots of string juggling) LESS -> Sass conversion. - *Gleb Mazovetskiy*
* Ported rake task from vwall/compass-twitter-bootstrap to convert Bootstrap upstream - *Peter Gumeson*
* Moved javascripts to us `bootstrap-component.js` to `bootstrap/component.js` - *Peter Gumeson*
* Allow sass-rails `>= 3.2` - *Thomas McDonald*
* Update to Bootstrap 2.3.2 - *Dan Allen*
* Find the correct Sprockets context for the `image_path` function - *Tristan Harward, Gleb Mazovetskiy*
* Fix changes to image url - *Gleb Mazovetskiy*
* Copy _variables into project on Compass install - *Phil Thompson*
* Add `bootstrap-affix` to the Compass template file - *brief*
## (yanked)
* Change how image_url is handled internally - *Tristan Harward*
* Fix some font variables not having `!default` - *Thomas McDonald*
* [#290] Update to Bootstrap 2.3.0 - *Tristan Harward*
* Fix `rake:debug` with new file locations - *Thomas McDonald*
* Add draft contributing document - *Thomas McDonald*
* [#260] Add our load path to the global Sass load path - *Tristan Harward*
* [#275] Use GitHub notation in Sass head testing gemfile - *Timo Schilling*
* [#279, #283] Readme improvements - *theverything, Philip Arndt*
* [#270] Update to Bootstrap 2.2.2 - *Tristan Harward*
* [#266] Add license to gemspec - *Peter Marsh*
* [#258] Use `bootstrap` prefix for `@import`ing files in `bootstrap/bootstrap.scss` - *Umair Siddique*
* [#246] Update to Bootstrap 2.2.1 - *Tristan Harward*
* [#246] Pull Bootstrap updates from jlong/sass-twitter-bootstrap - *Tristan Harward*
* Update to Bootstrap 2.1.1
* [#222] Remove 100% multiplier in vertical-three-colours
* [#227] Fix IE component animation collapse
* [#228] Fix variables documentation link
* [#231] Made .input-block-level a class as well as mixin
* [#219] Fix expected a color. Got: transparent.
* [#207] Add missing warning style for table row highlighting
* [#208] Use grid-input-span for input spans
* Updated to Bootstrap 2.1
* Changed some mixin names to be more consistent. Nested mixins in Less are separated by a `-` when they are flattened in Sass.
* Fix `.row-fluid > spanX` nesting
* Small Javascript fixes for those staying on the 2.0.4 release
* Add `!default` to z-index variables.
* Updated to Bootstrap 2.0.4
* Switched to Bootstrap 2.0.3+'s method of separating responsive files
* [#149, #150] Fix off by one error introduced with manual revert of media query breakpoints
* `rake debug` and `rake test` both compile bootstrap & bootstrap-responsive
* [#145, #146] Fix button alignment in collapsing navbar as a result of an incorrect variable
## 2.0.3
* Updated to Bootstrap 2.0.3
* [#106] Support for Rails < 3.1 through Compass
* [#132] Add CI testing
* [#106] Support Rails w/Compass
* [#134] Fix support for Rails w/Compass
## 2.0.2
* [#86] Updated to Bootstrap 2.0.2
Things of note: static navbars now have full width. (to be fixed in 2.0.3) `.navbar-inner > .container { width:940px; }` seems to work in the meanwhile
* [#62] Fixed asset compilation taking a *very* long time.
* [#69, #79, #80] \(Hopefully) clarified README. Now with less cat humour.
* [#91] Removed doubled up Sass extensions for Rails.
* [#63, #73] Allow for overriding of image-path
* [[SO](] Added makeFluidColumn mixin for defining fluid columns. Fluid rows must use `@extend .row-fluid`, and any column inside it can use `@include makeFluidColumn(num)`, where `num` is the number of columns. Unfortunately, there is a rather major limitation to this: margins on first-child elements must be overriden. See the attached Stack Overflow answer for more information.
## 2.0.1
* Updated to Bootstrap 2.0.1
* Modified `@mixin opacity()` to take an argument `0...1` rather than `0...100` to be consistent with Compass.
## 2.0.0
* Updated to Bootstrap 2.0.0
# Contributing to bootstrap-sass
## Asset Changes
Any changes to `bootstrap-sass` assets (scss, javascripts, fonts) should be checked against the `convert` rake task.
For usage instructions, see the [README](/
If something is broken in the converter, it's preferable to update the converter along with the asset itself.
## Bugs
A bug is a _demonstrable problem_ that is caused by the code in the
repository. Good bug reports are extremely helpful - thank you!
Guidelines for bug reports:
1. **Does it belong here?** &mdash; is this a problem with bootstrap-sass, or
it an issue with [twbs/bootstrap](
We only distribute a direct port and will not modify files if they're not
changed upstream.
2. **Use the GitHub issue search** &mdash; check if the issue has already been
3. **Isolate the problem** &mdash; ideally create a [reduced test
case]( and a live example.
A good bug report shouldn't leave others needing to chase you up for more
information. Please try to be as detailed as possible in your report. What is
your environment? What steps will reproduce the issue? What browser(s) and OS
experience the problem? What would you expect to be the outcome? All these
details will help people to fix any potential bugs.
> Short and descriptive example bug report title
> A summary of the issue and the browser/OS environment in which it occurs. If
> suitable, include the steps required to reproduce the bug.
> 1. This is the first step
> 2. This is the second step
> 3. Further steps, etc.
> `<url>` (a link to the reduced test case)
> Any other information you want to share that is relevant to the issue being
> reported. This might include the lines of code that you have identified as
> causing the bug, and potential solutions (and your opinions on their
> merits).
**[File a bug report](**
## Pull requests
**We will not accept pull requests that modify the SCSS beyond fixing bugs caused by *our* code!**
Most pull requests should go to [twbs/bootstrap]( or [jlong/sass-twitter-bootstrap](
Good pull requests - patches, improvements, new features - are a fantastic
help. They should remain focused in scope and avoid containing unrelated
commits. If your contribution involves a significant amount of work or substantial
changes to any part of the project, please open an issue to discuss it first.
Make sure to adhere to the coding conventions used throughout a project
(indentation, accurate comments, etc.). Please update any documentation that is
relevant to the change you're making.
## Do not…
Please **do not** use the issue tracker for personal support requests (use
[Stack Overflow](
Please **do not** derail or troll issues. Keep the
discussion on topic and respect the opinions of others.
*props [html5-boilerplate](*
The MIT License (MIT)
Copyright (c) 2013 Twitter, Inc
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
# Bootstrap for Sass [![Gem Version](]( [![Bower Version](]( [![Build Status](](
`bootstrap-sass` is a Sass-powered version of [Bootstrap](, ready to drop right into your Sass powered applications.
## Installation
Please see the appropriate guide for your environment of choice:
* [Ruby on Rails](#a-ruby-on-rails).
* [Compass](#b-compass-without-rails) not on Rails.
* [Bower](#c-bower).
### a. Ruby on Rails
`bootstrap-sass` is easy to drop into Rails with the asset pipeline.
In your Gemfile you need to add the `bootstrap-sass` gem, and ensure that the `sass-rails` gem is present - it is added to new Rails applications by default.
gem 'bootstrap-sass', '~> 3.3.1'
gem 'sass-rails', '>= 3.2'
It is also recommended to use [Autoprefixer]( with Bootstrap
to add browser vendor prefixes automatically. Simply add the gem:
gem 'autoprefixer-rails'
`bundle install` and restart your server to make the files available through the pipeline.
Import Bootstrap styles in `app/assets/stylesheets/application.css.scss`:
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";
`bootstrap-sprockets` must be imported before `bootstrap` for the icon fonts to work.
Make sure the file has `.css.scss` extension (or `.css.sass` for Sass syntax). If you have just generated a new Rails app,
it may come with a `.css` file instead. If this file exists, it will be served instead of Sass, so remove it:
$ rm app/assets/stylesheets/application.css
Do not use `//= require` in Sass or your other stylesheets will not be [able to access][antirequire] the Bootstrap mixins or variables.
Require Bootstrap Javascripts in `app/assets/javascripts/application.js`:
//= require jquery
//= require bootstrap-sprockets
#### Bower with Rails
When using [bootstrap-sass Bower package](#c-bower) instead of the gem in Rails, configure assets in `config/application.rb`:
# Bower asset paths
root.join('vendor', 'assets', 'bower_components').to_s.tap do |bower_path|
config.sass.load_paths << bower_path
config.assets.paths << bower_path
# Precompile Bootstrap fonts
config.assets.precompile << %r(bootstrap-sass/assets/fonts/bootstrap/[\w-]+\.(?:eot|svg|ttf|woff)$)
# Minimum Sass number precision required by bootstrap-sass
::Sass::Script::Number.precision = [10, ::Sass::Script::Number.precision].max
Replace Bootstrap `@import` statements in `application.css.scss` with:
$icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";
@import "bootstrap-sass/assets/stylesheets/bootstrap-sprockets";
@import "bootstrap-sass/assets/stylesheets/bootstrap";
Replace Bootstrap `require` directive in `application.js` with:
//= require bootstrap-sass/assets/javascripts/bootstrap-sprockets
#### Rails 4.x
Please make sure `sprockets-rails` is at least v2.1.4.
#### Rails 3.2.x
Rails 3.2 is [no longer maintained for bugfixes](, and you should upgrade as soon as possible.
Starting with bootstrap-sass v3.1.1.1, due to the structural changes from upstream you will need these
backported asset pipeline gems on Rails 3.2. There is more on why this is necessary in and
gem 'sprockets-rails', '=2.0.0.backport1'
gem 'sprockets', '=2.2.2.backport2'
gem 'sass-rails', github: 'guilleiguaran/sass-rails', branch: 'backport'
### b. Compass without Rails
Install the gem
gem install bootstrap-sass
If you have an existing Compass project:
# config.rb:
require 'bootstrap-sass'
$ bundle exec compass install bootstrap