Giter VIP home page Giter VIP logo

sassdash's Introduction

Sassdash

Sassdash logo

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

It's lodash for Sass. Sassdash.

Read the documentation!

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.

Getting Started

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

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

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

  • Testing still needs to be done in Libsass.

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!

Running Tests

WARNING: There are over 500 unit tests, and more to come. Running them all takes between 1 and 2 minutes.

  1. cd path/to/sassdash
  2. bower install true
  3. true-cli tests/true-tests.scss

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 - _get, _set and _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

$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

  • โŒ - Not implemented
  • ๐Ÿ•œ - 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
โŒ _.pullAt
โŒ _.remove
_rest _.rest
_slice _.slice
๐Ÿ•œ _.sortedIndex
๐Ÿ•œ _.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
_ _
โŒ _.chain
โŒ _.tap
โŒ _.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
โŒ _.now

Function

Sassdash lodash
_after _.after
_ary _.ary
_backflow _.backflow โ†’ flowRight
_before _.before
_bind _.bind
๐Ÿ•œ _.bindAll
๐Ÿ•œ _.bindKey
_compose _.compose โ†’ flowRight
โŒ _.curry
โŒ _.curryRight
โŒ _.debounce
โŒ _.defer
โŒ _.delay
_flow _.flow
_flow-right _.flowRight
_memoize _.memoize
_negate _.negate
_once _.once
_partial _.partial
_partial-right _.partialRight
๐Ÿ•œ _.rearg
๐Ÿ•œ _.spread
โŒ _.throttle
โŒ _.wrap

Lang

Sassdash lodash
โŒ _.clone
โŒ _.cloneDeep
_is-arglist _.isArguments
_is-list _.isArray
_is-boolean _.isBoolean
โŒ _.isDate
โŒ _.isElement
_is-empty _.isEmpty
_is-equal _.isEqual
_is-error _.isError
_is-finite _.isFinite
_is-function _.isFunction
_is-match _.isMatch
โŒ _.isNaN
_is-native _.isNative
_is-null _.isNull
_is-number _.isNumber
_is-map _.isObject
_is-plain-map _.isPlainObject
โŒ _.isRegExp
_is-string _.isString
โŒ _.isTypedArray
โŒ _.isUndefined
_to-list _.toArray
_to-map _.toPlainObject

Math

Sassdash lodash
_add _.add
_max _.max
_min _.min
_sum _.sum

Number

Sassdash lodash
๐Ÿ•œ _.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
โŒ _.transform
_values _.values
_values-in _.valuesIn

String

Sassdash lodash
_camel-case _.camelCase
_capitalize _.capitalize
โŒ _.deburr
_ends-with _.endsWith
_escape _.escape
โŒ _.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
โŒ _.template
_trim _.trim
_trim-left _.trimLeft
_trim-right _.trimRight
_trunc _.trunc
_unescape _.unescape
_words _.words

Utility

Sassdash lodash
โŒ _.attempt
_callback _.callback
_constant _.constant
_identity _.identity
_iteratee _.iteratee โ†’ callback
_matches _.matches
_matches-property _.matchesProperty
โŒ _.mixin
โŒ _.noConflict
_noop _.noop
_property _.property
_property-of _.propertyOf
_range _.range
โŒ _.runInContext
_times _.times
_unique-id _.uniqueId

sassdash's People

Contributors

davidkpiano avatar kittygiraudel avatar gitter-badger avatar

Watchers

Michael Benin avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.