Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
lib
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Awesome Extensions For Sass 💋

Build Status Gem Version

Requires Sass >= 3.3

SassMeister

Installation

In your Gemfile:

gem 'base.sass'

Or in command line:

$ gem install base.sass

Usage

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'

Examples

Please refer to wiki page.

Features

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-keys($map)
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.

Rules:

  • 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(http://a.com/b.png)
//=> url(http://a.com/b.png) # Did nothing

url('http://a.com/b.png')
//=> url(http://a.com/b.png?1399394203)

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')
//=> 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/vnd.ms-fontobject;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;
}

Test

$ git clone https://github.com/jsw0528/base.sass && cd base.sass && rake

License

Licensed under the MIT License.

You can’t perform that action at this time.