sassdash

Read the complete documentation here: davidkpiano.github.io/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:

• The method name (first item)
• The arguments (2nd - nth items)

$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:

• Discard the rest of the arguments in the function definition: @function is-even($value, $args...) { ... }
• Wrap the function with _ary: _map($list, _ary(is-even));

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

$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:

• char functions - _char-at, _char-code, _char-code-at
• number functions - _parse-float (alias _to-number) - similar to JavaScript parseFloat
• value functions - _memo for easy cache manipulation
• list functions - _reverse, _concat, and _splice
• string functions - _str-concat and _join (list to string)

\ 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

• :x: - Not implemented
• :clock130: - Coming soon

List (Array)

Sassdash | lodash ---------|------- 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

Sassdash | lodash ---------|------- | :x: | .chain :x: | .tap :x: | .thru

Collection

Sassdash | lodash ---------|------- 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

Sassdash | lodash ---------|------- :x: | .now

Function

Sassdash | lodash ---------|------- 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

Sassdash | lodash ---------|------- :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

Sassdash | lodash ---------|------- add | .add max | .max min | .min sum | .sum

Number

Sassdash | lodash ---------|------- :clock130: | .inRange rand | .random

Object

Sassdash | lodash ---------|------- 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

Sassdash | lodash ---------|------- 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

Sassdash | lodash ---------|------- :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