Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Awesome Extensions For Sass 💋

Build Status Gem Version

Requires Sass >= 3.3



In your Gemfile:

gem 'base.sass'

Or in command line:

$ gem install base.sass


At top of your Sass file:

@import 'base.sass/+';

Then, use -r option in command line:

$ sass --watch -r base.sass src:dist

Or in config.rb:

require 'base.sass'


Please refer to wiki page.


Read environment variables (case insensitive)

When you run:

$ SASS_ENV=production sass --update -r base.sass src:dist

Then you can use env() in Sass files to get the value:

env(SASS_ENV) //=> production
env(sass_env) //=> production
env(sass-env) //=> production

You can use any KEY=value if you want.

Parse local json file

Returns a map, and the result will be cached per process.

$map: parse-json('~/Desktop/example.json');
$pkg: parse-json('package.json');

// Then, you can:
map-get($pkg, 'some key')

Now you can use the same configurations both in js and css.

Parse browser supports (case insensitive)

All supported browsers: chrome, firefox, safari, ie, opera, ios, android.

Rules data are from Can I Use.


  • last 1 version is last versions for each browser.
  • last 2 Chrome versions is last versions of the specified browser.
  • IE > 8 is IE versions newer than 8.
  • IE >= 8 is IE version 8 or newer.
  • iOS 7 to set browser version directly.
// You can use multi params
$browser-supports: parse-rules('last 1 version', 'IE >= 8');

// Or a list
$rules: 'last 1 version', 'IE >= 8';
$browser-supports: parse-rules($rules);

// Then, you can:
@if support-browser(Android) {
  // ...

@if not support-browser(ie 8) {
  // ...

Enhanced url()

If you want to activate the enhanced url(), you should wrap paths with quotes.

//=> url( # Did nothing

//=> url(

url('a.png', 'b.png')
//=> url(a.png?1399394203), url(b.png?1399394203)

url('a.eot#iefix', 'b.woff')
//=> url(a.eot?1399394203#iefix) format('embedded-opentype'), url(b.woff?1399394203) format('woff')

The timestamp be added automatically by default, but you can remove it, or change it to whatever string you wanted.

url('a.png', $timestamp: false)
//=> url(a.png)

url('a.png', $timestamp: '1.0.0')
//=> url(a.png?1.0.0)

Also, you can defined timestamp as a global configuration in app-config namespace:

$app-config: (
  development: (
    timestamp: '1.1.0.alpha'
  production: (
    timestamp: '1.0.0'

//=> url(a.png?1.1.0.alpha) if SASS_ENV is development
//=> url(a.png?1.0.0) if SASS_ENV is production

The data uri is also be supported.

url('a.png', $base64: true)
//=> url(data:image/png;base64,iVBORw...)

url('a.eot', 'b.woff', $base64: true)
//=> url(data:application/;base64,HAcAA...), url(data:application/font-woff;base64,d09GR...)

Powerful map functions

Overrides official map functions to support nest keys.

map-get($map, a)
map-get($map, a, b, c)

map-delete($map, a)
map-delete($map, a, b, c)

map-has-key($map, a)
map-has-key($map, a, b, c)

map-merge($map1, $map2)
map-merge($map1, $map2, true) // deep merge

Placeholder-style mixins

If you want to let css contents appear in the place where it used first time, this is yours! 😎

Please refer to ellipsis-overflow mixin.

.foo {
  @include ellipsis-overflow;

.bar {
  @include ellipsis-overflow;

Compiles to:

.foo, .bar {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;


$ git clone && cd base.sass && rake


Licensed under the MIT License.