Home

Awesome

Sassdash

Read the complete documentation here: davidkpiano.github.io/sassdash

Sassdash logo

Join the chat at https://gitter.im/davidkpiano/sassdash

It's lodash for Sass. Sassdash.

Why? Developed with Sass toolkit developer in mind, Sassdash gives you nearly the full expressive power of lodash for JavaScript, inside your SCSS projects. Developers can also build SCSS libraries on top of Sassdash for concepts such as advanced animation composition and timing, 3D CSS rendering, geometrical rendering, complex grid frameworks, and more.

Sassdash is a collection of utility functions, just like lodash. Sassdash never outputs any CSS declarations as it provides no mixins to do so (except for _rules, which is pretty handy).

Getting Started

This library contains most of the implementable functions from lodash. See below to see which functions are included.

  1. npm install sassdash or bower install sassdash
  2. @import 'path/to/sassdash' in your project
  3. Use your new powers wisely.

FYI: Neither Compass nor Eyeglass are required. Sassdash works in both Ruby Sass and Libsass (latest versions)!

Using Sassdash

If you are familiar with lodash, Sassdash will feel very natural to you.

$maps: (
  ('name': 'barney', 'age': 36),
  ('name': 'fred', 'age': 40)
);

_pluck($maps, 'name'); // ('barney', 'fred')

Functions are chainable in Sassdash via _(...), but there is no lazy evaluation. Results are output immediately. Since Sass does not have a natural concept of method linking, linking in Sassdash is done by having each link represent:

$foobar: ('a' 'b' 'c', 'd' 'e' 'f', 'g' 'h' 'i');

_($foobar,
  _map _join,
  _reduce _str-concat,
  _concat 'jkl',
  _join ' -- '); // 'abcdefghi -- jkl'

Also, just as in lodash, iteratee functions (such as those used with _map) are called with three arguments: $value, $index, $collection. Keep this in mind when passing in your functions as iteratee functions. If your function only expects the $value argument, you can either:

However, native Sass functions as iteratees are automatically guarded! You can simply include them as an iteratee:

$capitals: ('Tallahassee', 'Springfield', 'Austin');

$uppercase-capitals: _map($capitals, to-upper-case);
// => ('TALLAHASSEE', 'SPRINGFIELD', 'AUSTIN')

Running Tests

There are over 800 unit tests. With node-sass, they usually take under 10 seconds to run. With Ruby Sass, they may take anywhere from 1 to 2 minutes.

  1. cd path/to/sassdash
  2. npm install
  3. npm test

New Functions

Sassdash includes a number of helper functions not available in lodash, which include utility functions and implementations of native Javascript functions:

* Example:

$map: ('foo': ('bar': ('baz': 'quo')));
$list: (1, ('a': 2), 3);

$baz: _get($map, 'foo' 'bar' 'baz'); // => 'quo'
$something: _get($list, 2 'a'); // => 2

// You can also do this:
$baz: _get($map, 'foo.bar.baz'); // => 'quo'

$map: _set($map, 'foo' 'bar' 'test', 42);
// => ('foo': ('bar': ('baz': 'quo', 'test': 42)))

$list: _set($list, 2 'a', 42);
// => (1, ('a': 42), 3)

Available lodash Functions

List (Array)

Sassdashlodash
_chunk_.chunk
_compact_.compact
_difference_.difference
_drop_.drop
_drop-right_.dropRight
_drop-right-while_.dropRightWhile
_drop-while_.dropWhile
_fill_.fill
_find-index_.findIndex
_find-last-index_.findLastIndex
_first_.first
_flatten_.flatten
_flatten-deep_.flattenDeep
_head_.head → first
_index-of_.indexOf
_initial_.initial
_intersection_.intersection
_last_.last
_last-index-of_.lastIndexOf
_object_.object → zipObject
_pull_.pull
:x:_.pullAt
:x:_.remove
_rest_.rest
_slice_.slice
:clock130:_.sortedIndex
:clock130:_.sortedLastIndex
_tail_.tail → rest
_take_.take
_take-right_.takeRight
_take-right-while_.takeRightWhile
_take-while_.takeWhile
_union_.union
_uniq_.uniq
_unique_.unique → uniq
_unzip_.unzip
_without_.without
_xor_.xor
_zip_.zip
_zip-map_.zipObject

Chain

Sassdashlodash
__
:x:_.chain
:x:_.tap
:x:_.thru

Collection

Sassdashlodash
_all_.all → every
_any_.any → some
_at_.at
_collect_.collect → map
_contains_.contains → includes
_count-by_.countBy
_detect_.detect → find
_each_.each → forEach
_each-right_.eachRight → forEachRight
_every_.every
_filter_.filter
_find_.find
_find-last_.findLast
_find-where_.findWhere
_foldl_.foldl → reduce
_foldr_.foldr → reduceRight
_for-each_.forEach
_for-each-right_.forEachRight
_group-by_.groupBy
_include_.include → includes
_includes_.includes
_index-by_.indexBy
_inject_.inject → reduce
_invoke_.invoke
_map_.map
_partition_.partition
_pluck_.pluck
_reduce_.reduce
_reduce-right_.reduceRight
_reject_.reject
_sample_.sample
_select_.select → filter
_shuffle_.shuffle
_size_.size
_some_.some
_sort-by_.sortBy
_sort-by-all_.sortByAll
_sort-by-order_.sortByOrder
_where_.where

Date

Sassdashlodash
:x:_.now

Function

Sassdashlodash
_after_.after
_ary_.ary
_backflow_.backflow → flowRight
_before_.before
_bind_.bind
:clock130:_.bindAll
:clock130:_.bindKey
_compose_.compose → flowRight
:x:_.curry
:x:_.curryRight
:x:_.debounce
:x:_.defer
:x:_.delay
_flow_.flow
_flow-right_.flowRight
_memoize_.memoize
_negate_.negate
_once_.once
_partial_.partial
_partial-right_.partialRight
:clock130:_.rearg
:clock130:_.spread
:x:_.throttle
:x:_.wrap

Lang

Sassdashlodash
:x:_.clone
:x:_.cloneDeep
_is-arglist_.isArguments
_is-list_.isArray
_is-boolean_.isBoolean
:x:_.isDate
:x:_.isElement
_is-empty_.isEmpty
_is-equal_.isEqual
_is-error_.isError
_is-finite_.isFinite
_is-function_.isFunction
_is-match_.isMatch
:x:_.isNaN
_is-native_.isNative
_is-null_.isNull
_is-number_.isNumber
_is-map_.isObject
_is-plain-map_.isPlainObject
:x:_.isRegExp
_is-string_.isString
:x:_.isTypedArray
:x:_.isUndefined
_to-list_.toArray
_to-map_.toPlainObject

Math

Sassdashlodash
_add_.add
_max_.max
_min_.min
_sum_.sum

Number

Sassdashlodash
:clock130:_.inRange
_rand_.random

Object

Sassdashlodash
_assign_.assign
_create_.create
_defaults_.defaults
_extend_.extend → assign
_find-key_.findKey
_find-last-key_.findLastKey
_for-in_.forIn
_for-in-right_.forInRight
_for-own_.forOwn
_for-own-right_.forOwnRight
_functions_.functions
_has_.has
_invert_.invert
_keys_.keys
_keys-in_.keysIn
_map-values_.mapValues
_merge_.merge
_methods_.methods → functions
_omit_.omit
_pairs_.pairs
_pick_.pick
_result_.result
:x:_.transform
_values_.values
_values-in_.valuesIn

String

Sassdashlodash
_camel-case_.camelCase
_capitalize_.capitalize
:x:_.deburr
_ends-with_.endsWith
_escape_.escape
:x:_.escapeRegExp
_kebab-case_.kebabCase
_pad_.pad
_pad-left_.padLeft
_pad-right_.padRight
_parse-int_.parseInt
_repeat_.repeat
_snake-case_.snakeCase
_start-case_.startCase
_starts-with_.startsWith
:x:_.template
_trim_.trim
_trim-left_.trimLeft
_trim-right_.trimRight
_trunc_.trunc
_unescape_.unescape
_words_.words

Utility

Sassdashlodash
:x:_.attempt
_callback_.callback
_constant_.constant
_identity_.identity
_iteratee_.iteratee → callback
_matches_.matches
_matches-property_.matchesProperty
:x:_.mixin
:x:_.noConflict
_noop_.noop
_property_.property
_property-of_.propertyOf
_range_.range
:x:_.runInContext
_times_.times
_unique-id_.uniqueId