https://github.com/itsjonq/sass-maphacks
An Underscore/Lodash-like utility library for Sass maps
https://github.com/itsjonq/sass-maphacks
Last synced: 2 months ago
JSON representation
An Underscore/Lodash-like utility library for Sass maps
- Host: GitHub
- URL: https://github.com/itsjonq/sass-maphacks
- Owner: ItsJonQ
- License: mit
- Created: 2016-07-10T18:30:36.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-07-16T21:52:45.000Z (about 10 years ago)
- Last Synced: 2025-08-19T01:22:47.791Z (11 months ago)
- Language: CSS
- Homepage:
- Size: 45.9 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# sass-maphacks [](https://travis-ci.org/ItsJonQ/sass-maphacks) [](https://badge.fury.io/js/sass-maphacks)  [](https://david-dm.org/itsjonq/sass-maphacks#info=devDependencies)
An Underscore/Lodash-like utility library for Sass maps
# Update
Lol, nevermind! Just discovered [Sass Dash](https://github.com/davidkpiano/sassdash). Might be better to use that instead :).
## Install
```
npm install sass-maphacks --save-dev
```
## Basic Usage
### SCSS
This library needs to be imported into your sass pipeline. Below is an example using Gulp:
```javascript
var gulp = require('gulp');
var sass = require('gulp-sass');
var maphacks = require('sass-maphacks');
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass({
includePaths: maphacks
}))
.pipe(gulp.dest('./css'));
});
```
Once that is setup, simply `@import` *sass-maphacks* as needed in your `.scss` file:
```scss
@import "sass-maphacks/_index";
```
## Importing individual functions
If you wish to manually import and use indivdual functions in your code base (instead of importing all the `sass-maphacks` things), you can do the following:
```scss
// Input (awesome-class.scss)
@import "sass-maphacks/get";
$color: (
primary: (
blue: blue,
green: green
),
text: black
);
.my-awesome-class {
color: _get($color, primary, blue);
}
// Output (awesome-class.css)
.my-awesome-class {
color: blue;
}
```
## Functions
- _concat
- _extend
- _first
- _get
- _has
- _indexOf
- _isList
- _isMap
- _keys
- _last
- _set
- _values
- _zip
More functions + docs coming soon ❤️
## License
MIT © [Jon Q](https://jonquach.com)
## Thanks
A huge thanks to [Hugo Giraudel](http://hugogiraudel.com/) for his awesome + inspiration work with Sass things!