A Lightweight Sass Tool Set


Bourbon logo

Reviewed by Hound

A Lightweight Sass Tool Set

Bourbon is a library of Sass mixins and functions that are designed to make you a more efficient style sheet author.

It is…

  • Dependency-free: Bourbon is pure Sass.
  • Human-readable: We aim for clarity over brevity.
  • Lightweight: Zero output post-install and has no visual opinion.

Helpful Links

Table of Contents



  1. Install the Bourbon gem using the RubyGems package manager:

    gem install bourbon
  2. Install the Bourbon library into the current directory:

    bourbon install

    Pro Tip: You can target installation into a specific directory using the path flag:

    bourbon install --path my/custom/path/
  3. Import Bourbon at the beginning of your stylesheet:

    @import "bourbon/bourbon";

    It’s not recommended that you modify Bourbon’s files directly as it will make updating to future versions difficult, by overwriting your custom changes or causing merge conflicts.

Installation for Ruby on Rails 4.2+

  1. Add Bourbon to your Gemfile:

    gem "bourbon"
  2. Then run:

    bundle install
  3. Restart your server and rename application.css to application.scss:

    mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
  4. Delete all Sprockets directives in application.scss (require, require_tree and require_self) and use Sass’s native @import instead (why?).

  5. Import Bourbon at the beginning of application.scss. Any project styles that utilize Bourbon’s features must be imported after Bourbon.

    @import "bourbon";
    @import "home";
    @import "users";

Installing with npm and using a Node-based asset pipeline

  1. Add Bourbon as a dependency:

    npm install --save bourbon
  2. If you’re using eyeglass, skip to Step 3. Otherwise, you’ll need to add Bourbon to your node-sass includePaths option. require("bourbon").includePaths is an array of directories that you should pass to node-sass. How you do this depends on how node-sass is integrated into your project.

  3. Import Bourbon into your Sass files:

    @import "bourbon";

Installing older versions of Bourbon

  1. Uninstall any Bourbon gem versions you already have:

    gem uninstall bourbon
  2. Reinstall the Bourbon gem, using the -v flag to specify the version you need:

    gem install bourbon -v 4.2.7
  3. Follow the instructions above to install Bourbon into your project.

Command Line Interface

bourbon [options]


Option Description
-h, --help Show help
-v, --version Show the version number
--path Specify a custom path
--force Force install (overwrite)


Command Description
bourbon install Install Bourbon into the current directory
bourbon update Overwrite and update Bourbon in the current directory
bourbon help Show help

Browser Support

Bourbon supports Internet Explorer 11+ and the latest versions of Chrome, Firefox, Safari, and Edge.


See the contributing document. Thank you, contributors!


Bourbon is copyright © 2011-2020 thoughtbot, inc. It is free software, and may be redistributed under the terms specified in the license.


Bourbon is maintained by the thoughtbot design team. It is funded by thoughtbot, inc. and the names and logos for thoughtbot are trademarks of thoughtbot, inc.


We love open-source software! See our other projects or hire us to design, develop, and grow your product.

  • [Announcement] An Update on Bourbon v5.0

    [Announcement] An Update on Bourbon v5.0

    We’re working hard on the next major version of Bourbon (v5.0) and we’d like to update you with our goals and progress. You can also follow along on with the v5.0 branch.

    First, we’ve decided to remove browser prefixing features from Bourbon. Our main reasons for doing so are:

    • It’s no longer best practice for pre-processors like Sass to handle prefixing. Instead, a post-processor is better suited for this task and allows you to write much cleaner Sass (no more @include’s for prefixes!).
    • Autoprefixer is a robust, well-maintained tool to post-process prefixes.
    • There’s no easy way for us to decide what browser versions Bourbon should support.
    • Autoprefixer ties into the Can I use database and allows you to specify the exact browser support you need, per project. This is quite powerful, yet painless.

    Along with that, we are porting our documentation over to SassDoc, so that it’s more comprehensive, consistent and easier to contribute to. And we’re also writing feature tests for Bourbon, so that we can make sure the code is always stable.

    We hope everyone is as excited for the future of Bourbon as we are!

    – The Bourbon Team

    opened by tysongach 72
  • File to import not found or unreadable: ../functions/linear-gradient.

    File to import not found or unreadable: ../functions/linear-gradient.

    Hi there,

    Today I just updated to version 1.0.3 and now I'm getting this error

    ActionView::Template::Error (File to import not found or unreadable: ../functions/linear-gradient.)

    I can't identify the problem just by checking the source code and the stack trace.

    opened by bltavares 47
  • Deprecate `em()` and `rem()` functions

    Deprecate `em()` and `rem()` functions

    I think the em and rem functions should be deprecated because they do not properly indicate the true output and make the em to pixel conversion more confusing.

    Ems are powerful because they are not an absolute unit, but rather based off their parent’s font size. So if the font size through an entire website or app remained at 16px, then this function would make sense. But that is not always the case.

    Consider this example:

    .element {
      font-size: 20px;
      .nested-element {
        margin-right: em(48);

    The code above makes it appear that margin-right is equal to 48px. However, the output of will actually be 3em, which equates to 60px. This is because the parent font size has changed and the function has no way of taking that into consideration automatically.

    Of course, you can pass a second argument into the function (e.g. em(12, 24)), but this adds unnecessary overhead and our Sass has now become more verbose and less DRY:

    .element {
      font-size: 20px;
      .nested-element {
        margin-right: em(48, 20);

    Done many times throughout stylesheets and it makes for lots of repetition.

    I have found that if you give up thinking about layouts in exact pixels and instead align things relationally, everything still falls into place nicely.

    [type] deprecation 
    opened by tysongach 32
  • Undefined variable:

    Undefined variable: "$em-base"

    I'm getting this error when assets:precompile runs...

    The deploy has failed with an error: #<SSHKit::Runner::ExecuteError: Exception while executing on host cfs.staging: rake exit status: 1
    rake stdout: Nothing written
    rake stderr: /usr/local/rvm/rubies/ruby-2.1.2/bin/ruby /usr/local/rvm/gems/ruby-2.1.2@cfs-web/bin/rake assets:precompile:all RAILS_ENV=staging RAILS_GROUPS=assets
    rake aborted!
    Sass::SyntaxError: Undefined variable: "$em-base".
      (in /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/bourbon-4.1.1/app/assets/stylesheets/functions/_modular-scale.scss)
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/script/tree/variable.rb:49:in `_perform'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/script/tree/node.rb:50:in `perform'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/script/tree/funcall.rb:170:in `perform_arg'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/script/tree/funcall.rb:124:in `block in _perform'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/script/tree/funcall.rb:124:in `each'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/script/tree/funcall.rb:124:in `each_with_index'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/script/tree/funcall.rb:124:in `each'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/script/tree/funcall.rb:124:in `map'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/script/tree/funcall.rb:124:in `_perform'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/script/tree/node.rb:50:in `perform'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/visitors/perform.rb:468:in `visit_variable'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/visitors/base.rb:36:in `visit'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/visitors/perform.rb:158:in `block in visit'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/stack.rb:79:in `block in with_base'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/stack.rb:115:in `with_frame'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/stack.rb:79:in `with_base'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/visitors/perform.rb:158:in `visit'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/visitors/base.rb:52:in `block in visit_children'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/visitors/base.rb:52:in `map'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/visitors/base.rb:52:in `visit_children'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/visitors/perform.rb:167:in `block in visit_children'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/visitors/perform.rb:179:in `with_environment'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/visitors/perform.rb:166:in `visit_children'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/visitors/base.rb:36:in `block in visit'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/visitors/perform.rb:186:in `visit_root'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/visitors/base.rb:36:in `visit'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/visitors/perform.rb:157:in `visit'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/visitors/perform.rb:8:in `visit'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/root_node.rb:36:in `css_tree'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/tree/root_node.rb:20:in `render'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-3.4.10/lib/sass/engine.rb:268:in `render'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sass-rails-3.2.6/lib/sass/rails/template_handlers.rb:106:in `evaluate'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/tilt-1.4.1/lib/tilt/template.rb:103:in `render'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/context.rb:193:in `block in evaluate'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/context.rb:190:in `each'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/context.rb:190:in `evaluate'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/turbo-sprockets-rails3-0.3.14/lib/turbo-sprockets/sprockets_overrides/processed_asset.rb:16:in `initialize'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/turbo-sprockets-rails3-0.3.14/lib/turbo-sprockets/sprockets_overrides/base.rb:18:in `new'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/turbo-sprockets-rails3-0.3.14/lib/turbo-sprockets/sprockets_overrides/base.rb:18:in `block in build_asset'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/base.rb:270:in `circular_call_protection'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/turbo-sprockets-rails3-0.3.14/lib/turbo-sprockets/sprockets_overrides/base.rb:14:in `build_asset'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/index.rb:93:in `block in build_asset'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/caching.rb:19:in `cache_asset'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/index.rb:92:in `build_asset'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/base.rb:169:in `find_asset'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/turbo-sprockets-rails3-0.3.14/lib/turbo-sprockets/sprockets_overrides/index.rb:14:in `find_asset'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/turbo-sprockets-rails3-0.3.14/lib/turbo-sprockets/sprockets_overrides/bundled_asset.rb:12:in `initialize'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/turbo-sprockets-rails3-0.3.14/lib/turbo-sprockets/sprockets_overrides/base.rb:22:in `new'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/turbo-sprockets-rails3-0.3.14/lib/turbo-sprockets/sprockets_overrides/base.rb:22:in `build_asset'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/index.rb:93:in `block in build_asset'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/caching.rb:19:in `cache_asset'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/index.rb:92:in `build_asset'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/base.rb:169:in `find_asset'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/turbo-sprockets-rails3-0.3.14/lib/turbo-sprockets/sprockets_overrides/index.rb:14:in `find_asset'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/turbo-sprockets-rails3-0.3.14/lib/turbo-sprockets/sprockets_overrides/static_compiler.rb:41:in `block in compile'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/base.rb:219:in `block in each_logical_path'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/base.rb:206:in `block (2 levels) in each_file'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/base.rb:196:in `each'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/base.rb:196:in `each_entry'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/base.rb:204:in `block in each_file'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/base.rb:203:in `each'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/base.rb:203:in `each_file'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/sprockets-2.2.3/lib/sprockets/base.rb:217:in `each_logical_path'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/turbo-sprockets-rails3-0.3.14/lib/turbo-sprockets/sprockets_overrides/static_compiler.rb:29:in `compile'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/turbo-sprockets-rails3-0.3.14/lib/turbo-sprockets/tasks/assets.rake:108:in `internal_precompile'
    /usr/local/rvm/gems/ruby-2.1.2@cfs-web/gems/turbo-sprockets-rails3-0.3.14/lib/turbo-sprockets/tasks/assets.rake:115:in `block (3 levels) in <top (required)>'
    Tasks: TOP => assets:precompile:all
    (See full trace by running task with --trace)
    rake aborted!
    opened by flynfish 28
  • Removed -moz-border-radius and -mox-box-shadow as Firefox 3.6 reached EOL.

    Removed -moz-border-radius and -mox-box-shadow as Firefox 3.6 reached EOL.

    Yay for the gradual death of vendor prefixes.

    Here is Mozilla's official announcement, https://blog.mozilla.org/futurereleases/2012/03/23/upcoming-firefox-support-changes/

    opened by frznk-tank 24
  • Doesn't work with rails 3.1 on Heroku cedar stack

    Doesn't work with rails 3.1 on Heroku cedar stack

    See attached stack trace. The gem is installed on heroku but for some reason @import can't find bourbon. No problems in development.

    2011-09-18T21:34:09+00:00 app[web.1]: Processing by PagesController#home as HTML 2011-09-18T21:34:09+00:00 app[web.1]: Rendered pages/home.html.haml within layouts/application (5.5ms) 2011-09-18T21:34:10+00:00 app[web.1]: Completed 500 Internal Server Error in 394ms 2011-09-18T21:34:10+00:00 app[web.1]: 2011-09-18T21:34:10+00:00 app[web.1]: ActionView::Template::Error (File to import not found or unreadable: bourbon. 2011-09-18T21:34:10+00:00 app[web.1]: Load path: /app 2011-09-18T21:34:10+00:00 app[web.1]: (in /app/app/assets/stylesheets/application.css.sass)):

    opened by davidkariuki 23
  • Add contrasting-color function

    Add contrasting-color function

    Bourbon has had an is-light function for awhile now (we used to use it in our now-deprecated button mixin). This new contrasting-color function builds on is-light and allows you to pass it arguments to easily output a light or dark color of your choosing based on the lightness of another color.

    So for example, our default button styles in Bitters could become a bit smarter/more flexible (for brevity, I’m only showing the affected styles below):

    #{$all-buttons} {
      background-color: $action-color;
      color: contrasting-color($action-color, #000, #fff);

    cc: @whmii

    • [x] Needs documentation
    • [x] Needs tests
    [type] new feature 
    opened by tysongach 22
  • Add rem unit mixin for font-size

    Add rem unit mixin for font-size

    This mixin allows easier use of rem units when working with font-size. Rem gives user resizable text, just like em units, without the hassle of compounding font-sizes. More info about the advantages of using rem over em or px can be found here: http://snook.ca/archives/html_and_css/font-size-with-rem

    As rem is not supported by IE8 and lower (http://caniuse.com/#search=rem), we still need to provide a pixel fallback, hence the need for a mixin. The easiest way to work with this is to set font-size: 62.5% on the html or body tag, wich gives us a nice 1rem == 10px relation to work with.

    The usage is:

    h2 {
      @include rem(18);

    wich outputs:

    h2 {
      font-size: 18px;
      font-size: 1.8rem;

    Let me know what you think!

    [type] new feature 
    opened by renaudleo 22
  • Add 2012 spec of flexbox.

    Add 2012 spec of flexbox.

    As per Chris Coyier's post on the latest spec for flexbox, which is in CR (Candidate Recommendation) status: http://css-tricks.com/old-flexbox-and-new-flexbox/.

    Should be a pretty simple addition... display: flex;

    [type] new feature 
    opened by hotmeteor 21
  • Rails 4 with font-face

    Rails 4 with font-face

    Using Rails 4 and Bourbon, and some issues have reared their ugly heads. I'm using the font-face mixin:

    +font-face(OpenSans, opensans-regular, normal, normal, true)

    However, the path generated in the stylesheet is /fonts/opensans-regular... but Rails 4 claims it doesn't exist. I have put all my font files under app/assets/fonts and added:

        config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

    to my application.rb. It seems the correct path in rails 4 is now /assets/opensans-regular. Is it possible to redirect fonts to assets, or should Bourbon be using asset-path in the font-face helper instead? Would this break Rails 3 compatibility? ~ Jonathan

    opened by nybblr 20
  • Can I add bourbon v5 (beta) to my project with Bower?

    Can I add bourbon v5 (beta) to my project with Bower?

    I'm using Autoprefixer, so a lot of mixins from bourbon v4 conflict with it. Bourbon v5 (beta) fixed this issue, is there any way to add it to my project using Bower?

    opened by Trost123 19
  • Compatibility with Rails 7

    Compatibility with Rails 7


    This change addresses an undefined method error that happens at boot time when the bourbon gem is in the Gemfile. After this change Rails will boot and the files under /core are available to the app.

    The problem is with line 6 in lib/bourbon.rb. My guess is that assets is not available on Rails::Engine::Configuration due to boot changes related to the Zeitwerk transition, and/or related to Sprockets no longer being a dependency.

    opened by hayesr 1
  • Document compatibility with Ruby Sass/gh-pages

    Document compatibility with Ruby Sass/gh-pages

    If #1107 is going to be merged, presumably it means compatibility with Ruby Sass (and thus stock github pages) has been dropped? Which is the latest version that will work with Ruby Sass? Can you please make that information prominently visible?


    opened by dabrahams 0
  • Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

    Using / for division is deprecated and will be removed in Dart Sass 2.0.0.


    Using SASS >= 1.33.0 produces the following warnings when compiling:

    : Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
    Recommendation: math.div($v1, $ratio)
    More info and automated migrator: https://sass-lang.com/d/slash-div
    113 │         $v1: ($v1 / $ratio);
        │               ^^^^^^^^^^^^
        node_modules\bourbon\core\bourbon\library\_modular-scale.scss 113:15  modular-scale()
        resources\scss\settings\_typography.scss 48:24                        @import
        resources\scss\settings\__index.scss 13:9                             @import
        resources\scss\main.scss 16:9                                         root stylesheet
    : Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
    Recommendation: math.div($value, $value * 0 + 1)
    More info and automated migrator: https://sass-lang.com/d/slash-div
    16 │   @return ($value / ($value * 0 + 1));
       │            ^^^^^^^^^^^^^^^^^^^^^^^^^
        node_modules\bourbon\core\bourbon\library\_strip-unit.scss 16:12  strip-unit()
        resources\scss\elements\_typography.scss 20:33                    @content
        resources\scss\tools\_mixins.scss 71:3                            mq()
        resources\scss\elements\_typography.scss 19:2                     @import
        resources\scss\elements\__index.scss 13:9                         @import
        resources\scss\main.scss 19:9                                     root stylesheet
    : Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
    Recommendation: math.div($width, 2)
    More info and automated migrator: https://sass-lang.com/d/slash-div
    70 │       border-width: $height ($width / 2) 0;
       │                              ^^^^^^^^^^
        node_modules\bourbon\core\bourbon\library\_triangle.scss 70:30  triangle()
        resources\scss\components\_sub-menu.scss 92:4                   @import
        resources\scss\components\__index.scss 19:9                     @import
        resources\scss\main.scss 21:9                                   root stylesheet
    : Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
    Recommendation: math.div($width, 2)
    More info and automated migrator: https://sass-lang.com/d/slash-div
    58 │       border-width: 0 ($width / 2) $height;
       │                        ^^^^^^^^^^
        node_modules\bourbon\core\bourbon\library\_triangle.scss 58:24  triangle()
        resources\scss\components\_sub-menu.scss 99:5                   @import
        resources\scss\components\__index.scss 19:9                     @import
        resources\scss\main.scss 21:9                                   root stylesheet

    Development Environment

    • Bourbon version: 7.0.0
    • Webpack version: 5.38.1
    opened by dkjensen 9
  • _is-color validator fails on CSS Custom Properties

    _is-color validator fails on CSS Custom Properties


    I would like to use the triangle() mixin with a CSS Custom Property as the color parameter but it obviously fails because the _is-color validator doesn't recognize the custom property as a color, which seems legit, but I think it should accept in some way CSS Custom Properties as they are more and more used, specially within a themable context.

    Steps to Reproduce

    .element {
      @include triangle($arrow-direction, $arrow-width, $arrow-height, var(--my-triangle-color));
    • Bourbon version: 7
    • Platform: any
    opened by GoOz 0
  • NoMethodError: undefined method `assets' for Rails enginer

    NoMethodError: undefined method `assets' for Rails enginer

    After upgrading to bourbon 7.0.0 with rails getting this error

    06:03:43 workers.1     | 2020-09-10T06:03:43.643Z pid=16842 tid=82wdq WARN: NoMethodError: undefined method `assets' for #<Rails::Engine::Configuration:0x0000000002b91f70>
    06:03:43 workers.1     | 2020-09-10T06:03:43.643Z pid=16842 tid=82wdq WARN: /home/vagrant/.rbenv/versions/2.6.0/lib/ruby/gems/2.6.0/gems/railties- `method_missing'
    06:03:43 workers.1     | /home/vagrant/.rbenv/versions/2.6.0/lib/ruby/gems/2.6.0/gems/bourbon-7.0.0/lib/bourbon.rb:6:in `<class:Engine>'
    opened by aditya-citrix 2
  • can't resolve`bourbon`

    can't resolve`bourbon`

    Some bundlers like parcel can't resolvebourbon when included in scss because of the main entry in package.json file. Please change the main entry point to same path as it is in style = "core/_bourbon.scss", :notes:

    No result in scss looks like

    @import 'normalize.css';
    @import '~node_modules/bourbon/core/bourbon';

    but could be like

    @import 'normalize.css';
    @import 'bourbon';

    Originally posted by @FDiskas in https://github.com/thoughtbot/bourbon/issues/802#issuecomment-510624302 Reference: https://github.com/parcel-bundler/parcel/issues/3205

    [type] enhancement 
    opened by FDiskas 2
  • v7.2.0(Feb 22, 2022)

    What's Changed

    • Reverted:

    Replace / with math.div per Dart Sass 2.0.0 updates. Thanks to @dkjensen for raising the issue and @jclusso for merging the migration."

    For context see : https://github.com/thoughtbot/bourbon/issues/1106#issuecomment-1048061338

    Source code(tar.gz)
    Source code(zip)
  • v7.1.0(Feb 22, 2022)


    • Replace / with math.div per Dart Sass 2.0.0 updates. Thanks to @dkjensen for raising the issue and @jclusso for merging the migration.
    Source code(tar.gz)
    Source code(zip)
  • v7.0.0(Mar 9, 2020)


    • Improved error handling of unsupported font file formats in the font-face mixin (supported formats are woff2 and woff).
    • CSS var() and env() functions are now accepted as values in the position and size mixins.


    • Updated thor from 0.x to 1.x


    • The font-face mixin no longer supports ttf, svg, and eot font file formats.
    Source code(tar.gz)
    Source code(zip)
  • v6.0.0(Jul 10, 2019)

  • v5.1.0(Jul 20, 2018)

  • v5.0.1(Jun 8, 2018)

  • v5.0.0(Jan 5, 2018)

    Bourbon 5.0.0 is a major release with lots of changes and removals, which are documented in the change log in each of the alpha and beta releases. There are no changes between v5.0.0-beta.8 and v5.0.0. For information on how to upgrade from v4 to v5, read our migrating guide.

    Source code(tar.gz)
    Source code(zip)
  • v5.0.0.beta.8(Jun 26, 2017)


    • A style property has been added to our package.json, which makes for easy importing when using npm-sass, sass-module-importer and others.


    • The triangle mixin no longer has default argument values. The order of the arguments also changed: $width and $height now come before $color.


    • The bourbon update CLI command now works when Bourbon is installed using a custom path.
    • Fixed an issue that would cause Bourbon to not be found within Rails apps.
    Source code(tar.gz)
    Source code(zip)
  • v4.3.4(Apr 1, 2017)

  • v4.3.3(Feb 23, 2017)

  • v4.3.2(Feb 10, 2017)

  • v4.3.1(Feb 8, 2017)

  • v4.3.0(Feb 3, 2017)

  • v5.0.0.beta.7(Nov 3, 2016)


    • Added white-space: nowrap; to the hide-visually mixin so that content renders on one line and is correctly pronounced by screen readers. You can read more about this in Jesse Beach’s article “Beware smushed off-screen accessible text.”


    • Removed the default values from the $position and $coordinates arguments for the position mixin.
    • Updated contrast-switch to calculate contrast based on the WCAG 2.0 specification. Please note that it is an approximation and we cannot guarantee full compliance, though all of our manual testing passed.
    • Renamed the $coordinates argument in the position mixin to $box-edge-values.
    • Updated $font-stack-system to include Avenir Next, Avenir, Lucida Grande, Helvetica, Noto, Franklin Gothic Medium, Century Gothic, and Liberation Sans. This follows system-fonts by Adam Morse.
    • The word-break property was removed from the word-wrap mixin and is no longer output.
    • Renamed the word-wrap mixin to overflow-wrap to align with the name change in the CSS spec.
    Source code(tar.gz)
    Source code(zip)
  • v5.0.0.beta.6(Jun 6, 2016)

  • v4.2.7(Apr 15, 2016)

  • v5.0.0.beta.5(Mar 23, 2016)


    • Fixed a Sass load path issue that would intermittently break the importing of Bourbon in Rails apps.


    • Swapped the order of the $file-formats and $asset-pipeline arguments in the font-face mixin, so that $asset-pipeline is last (because it has a default and is likely used the least).
    Source code(tar.gz)
    Source code(zip)
  • v5.0.0.beta.4(Mar 11, 2016)


    • We accidentally published 5.0.0.beta.3 as a stable release on npm, rather than a prerelease. We’ve unpublished that to go back to 4.2.6 on the stable channel.
    Source code(tar.gz)
    Source code(zip)
  • v5.0.0.beta.3(Mar 4, 2016)

  • v5.0.0.beta.2(Mar 4, 2016)


    • Added global settings for the contrast-switch mixin: contrast-switch-dark-color & contrast-switch-light-color.
    • Added the triangle mixin back, but note that it’s been refactored and the arguments have changed.


    • Swapped argument names contrast-switch; what was $dark-color is now $light-color and what was $light-color is now $dark-color.


    • Dropped support for Ruby on Rails versions older than 4.2.
    • Dropped support for LibSass versions older than 3.3.
    • The is-light function is now private.

    Full Changelog

    Source code(tar.gz)
    Source code(zip)
  • v5.0.0.beta.1(Feb 10, 2016)


    • Added a contrast-switch mixin that switches between two colors based on the lightness of a another color. Great for building button styles.
    • Added an $all-text-inputs-invalid variable to target the :invalid pseudo-class on all text-based inputs.
    • The ellipsis mixin now takes a $display argument.
    • Added a font stack for system fonts: $font-stack-system.
    • Added a hide-visually mixin that hides an element visually while still allowing the content to be accessible to assistive technology, e.g. screen readers.
    • The font-face mixin now allows additional CSS properties to be included in its block, which will output as part of the @font-face declaration. See 2356719.


    • The global default for the modular-scale ratio is now set to $major-third (1.25), instead of $perfect-fourth (1.333).
    • All font stack variables are now prefixed with $font-stack-, e.g. $font-stack-helvetica.
    • Global settings are now set via a $bourbon map, instead of variables. See 4e43c2d.
    • The clearfix mixin now uses block display, instead of table.


    • The $weight and $style arguments in the font-face mixin have been deprecated. Instead, you can now include these—along with other CSS properties—within the mixin block and they’ll be output as part of the @font-face declaration.

    Full Changelog

    Source code(tar.gz)
    Source code(zip)
  • v4.2.6(Nov 1, 2015)

  • v4.2.5(Sep 17, 2015)

  • v5.0.0.alpha.0(Aug 21, 2015)

    :warning: The changes mentioned below may not be complete, but should cover most of the deprecations and changes.

    New features

    • A new $global-font-file-formats setting has been added, allowing you to globally set the font file formats you want the font-face mixin to use. The default is ttf woff2 woff.


    • Removed the type selectors in $all-text-inputs and $all-buttons to reduce specificity.
    • Font stack variables have been modernized.
    • The prefixer mixin has been refactored and no-longer uses the $global-prefixes setting.


    • All vendor prefixing mixins have been removed. We recommend using a more robust and maintainable solution like Autoprefixer.
    • The em() and rem() mixins have been deprecated.
    • The $monospace font stack variable has been deprecated in favor of new $consolas, $courier-new and $monaco variables.
    • The triangle() mixin has been deprecated.


    • The strip-units function is now strip-unit.
    • The size() mixin now requires a comma-separated argument list: @include size(1em, 2em);.
    • We restructured Bourbon’s directory tree to be more succinct and reduce possible conflicts. The full library now lives in a core/ directory and all of the Sass partials are within a bourbon/ directory to avoid polluting imports paths. This will affect load paths if you use Bower.

    Compatibility with Neat, Bitters & Refills

    This alpha should be fully compatible with the latest version of Neat (1.7.2). Bitters 1.0 is not compatible, however the master branch is. We’ll get 1.1 out ASAP. At this time, most of Refills will not be compatible.

    If you have comments or come across a bug, please open an issue here on GitHub.

    Source code(tar.gz)
    Source code(zip)
  • v4.2.4(Aug 21, 2015)


    • $all-text-inputs now accounts for input’s that don’t have a type attribute specified, as they default to type="text". (https://github.com/thoughtbot/bourbon/commit/8e7e36e01c47194d83951fb6315c5b26a008f2b7)


    • The bourbon npm package now has a proper load path. (https://github.com/thoughtbot/bourbon/commit/36c2d5576f1fe9dbdfd9543e15064c5a4a16343e)
    Source code(tar.gz)
    Source code(zip)
    bourbon-v4.2.4.zip(7.76 MB)
  • v4.2.3(May 8, 2015)

  • v4.2.2(Apr 1, 2015)

  • v4.2.1(Feb 23, 2015)

  • v4.2.0(Feb 13, 2015)

    :tada: Bourbon is now compatible with LibSass 3.1+!


    • $all-button-inputs is now simply $all-buttons ($all-button-inputs will continue to work until v5.0).
    • $all-buttons also now includes the button element.
    • $all-text-inputs now includes the textarea element.

    Bug fixes

    • selection is now compatible with LibSass and we fixed a bug which caused errors in certain versions of Ruby Sass.
    • Fixed a bug with hide-text which caused some typefaces to extend into the visible area. It also no longer requires a height.


    • box-sizing has been deprecated and will be removed in v5.0.


    • Bourbon now requires Sass 3.4.
    • We are now bourbon on npm.
    • We are now using SCSS-Lint with Hound to help us keep our Sass in tip-top shape.
    • We’ve begun porting our documentation over to SassDoc, which will allow them to be versioned and make updating easier.
    • We’ve updated our browser support.
    Source code(tar.gz)
    Source code(zip)
    bourbon-v4.2.0.zip(6.42 MB)
  • v3.2.4(Jan 16, 2015)

thoughtbot, inc.
We work with organizations of all sizes to design, develop, and grow their web and mobile products.
thoughtbot, inc.
Source code for Chrome/Edge/Firefox/Opera extension Magic CSS (Live editor for CSS, Less & Sass)

Live editor for CSS, Less & Sass (Magic CSS) Extension Live editor for CSS, Less & Sass (Magic CSS) for Google Chrome, Microsoft Edge, Mozilla Firefox

null 210 Dec 13, 2022
Bắt đầu nhanh một dự án sử dụng Pug, Sass, Gulp

Quick start dự án Pug, Sass, Gulp Bắt đầu nhanh một dự án sử dụng Pug, Sass, Gulp #️⃣ Setup Cài đặt Node js Tới thư mục project cài template và các mo

Nguyễn Quang Sang 3 Oct 7, 2022
A collection of CSS3 buttons implemented in Sass.

CSS3 Buttons This is a collection of buttons that show what is possible using CSS3 and other advanced techniques, while maintaining the simplest possi

Chad Mazzola 1.3k Nov 8, 2022
A CSS button library built using Sass and Compass

Buttons 2.0 Buttons 2.0 Buttons is a highly customizable production ready mobile web and desktop css button library. Buttons is a free open source pro

Alex Wolfe 5.1k Jan 4, 2023
⚙️ Static site boilerplate. Using Gulp, PugJS, and Sass.

?? Alaska | Static-site Boilerplate ⚡ Fastest way to build HTML and CSS static sites. You don't have to learn complicated tools to build simple websit

Alaska Labs 8 Sep 10, 2022
Convert css (scss/sass) to vanilla-extract.

CSS-to-vanilla-extract ⚡ Welcome ?? Convert CSS (SCSS/SASS) to vanilla-extract. playground Install npm i -D c2ve Usage Once installed, you can run it

j1ngzoue 31 Jan 4, 2023
An NPM package to help frontend developers get started with using SASS and SCSS on your project easily. The Package follows the 7-1 architecture project structure.

Project Title - Create SASS APP Ever wanted to code up a frontend project with SASS & SCSS and you are stuck with building the acclaimed 7-1 architect

Kelechi Okoronkwo 7 Sep 22, 2022
A set of small, responsive CSS modules that you can use in every web project.

Pure A set of small, responsive CSS modules that you can use in every web project. http://purecss.io/ This project is looking for maintainers to suppo

Pure CSS 22.7k Jan 3, 2023
Set of react components based on styled-components

React to styled Links Documentation Contributing Ask question or give feedback Packages @react-to-styled/components – all components in one package @r

null 11 Jan 1, 2023
A lightweight and modular front-end framework for developing fast and powerful web interfaces

UIkit UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces. Homepage - Learn more about UIkit @getui

null 17.7k Jan 8, 2023
Spectre.css - A Lightweight, Responsive and Modern CSS Framework

Spectre.css Spectre.css is a lightweight, responsive and modern CSS framework. Lightweight (~10KB gzipped) starting point for your projects Flexbox-ba

Yan Zhu 11.1k Jan 8, 2023
Lightweight CSS framework

Material Design CSS Framework MUI is a lightweight CSS framework that follows Google's Material Design guidelines. Use From the CDN: <link href="//cdn

null 4.5k Jan 1, 2023
Styleguide generator is a handy little tool that helps you generate good looking styleguides from stylesheets using KSS notation

SC5 style guide generator Looking for a maintainer If you would like to maintain the project, create an issue and tell a few words about yourself. Sty

SC5 1.3k Sep 26, 2022
JSS is an authoring tool for CSS which uses JavaScript as a host language.

JSS A lib for generating Style Sheets with JavaScript. For documentation see our docs. Backers Support us with a monthly donation and help us continue

JSS 6.9k Dec 31, 2022
A simple build tool for Figma plugins based on webpack

Figpack EXPERIMENTAL / WORK IN PROGRESS A simple build tool for Figma plugins based on webpack. It's optimized for plugins that could get complex, mea

Roman Nurik 21 Oct 9, 2022
A powerful little tool for managing CSS animations

NO LONGER BEING SUPPORTED Please consider https://github.com/ThrivingKings/animo instead animo.js A powerful little tool for managing CSS animations.

Daniel Raftery 2.1k Jan 2, 2023
:iphone: A super lightweight HTML, Sass, CSS, and JavaScript framework for building responsive websites

Responsive Boilerplate A powerful, accessible, developer friendly, framework for building responsive websites Responsive Boilerplate is the developers

ResponsiveBP 845 Dec 22, 2022
Ajayi Ridwan 7 Oct 21, 2022
SET Revision is a website to help you identify "sets" in the card game SET.

Welcome to SET Revision! SET Revision is a website to help you identify "sets" in the card game SET. The code in this repository is aimed for learners

Benjamin Piper 2 Oct 3, 2022
A simple CSS tooltip made with Sass

Simptip [v1.0.4] A simple CSS tooltip made with Sass Visit Site, Documentation and some examples Installation Install with npm, Yarn or Bower: npm: np

Arash Manteghi 650 Dec 14, 2022