Sass

A collections of sass functions, mixins and placeholders.

Install

$ npm install --save-dev @chipchap/sass

Usage

Add the top of your main sass file.

@import "@chipchap/sass";

Contents

|Mixins|Functions| |-|-| |1. Breakpoints |1. Map | |2. Media Queries|2. List | |3. Grid |3. String| |4. Font face || |5. Animation ||

Breakpoints

@include breakpoints((
    sm: 18rem,
    md: 64rem,
    lg: 80rem,
    xlg: 90rem
));

Media Queries

Mobile first approach - first code for the smallest sizes and the next for the largest sizes.

.demo{
    background: blue;

    // Use breakpoints keys
    @include media(sm) {
        background: red;
    }

    // Use custom value
    @include media(20rem) {
        background: green;
    }
}

Grid

This Mixin is an adaptation from the original Flexbox Grid created by @kristoferjoseph.

@include grid((
    prefix: grid-,
    columns: 12,
    gutter-width: 1rem,
    outer-margin: 2rem,
    max-width: 1200px
));

Font face

@include font-face('MyFont', 'fonts/MyFont', 500, normal);

Animation

.demo {
    animation: .8s cubic-bezier(0.65, 0.05, 0.36, 1) forwards;
    @include animation(open) {
        from { transform: translateY(0) }
        to { transform: translateY(-100%) }
    }
}

Animate.css

animate.css is a bunch of cool, fun, and cross-browser animations by Dan Eden

Usage

Include the entire entrances animations family

@include animations(fading-entrances);

or include just the single animation

@include animations(fading-entrances/fadeInRight);

Animation families

attention-seekers bouncing-entrances bouncing-exits fading-entrances fading-exits flippers lightspeed rotating-entrances rotating-exits sliders specials

Single animation

attention-seekers

attention-seekers/bounce attention-seekers/flash attention-seekers/pulse attention-seekers/shake attention-seekers/swing attention-seekers/tada attention-seekers/wobble

bouncing-entrances

bouncing-entrances/bounceIn bouncing-entrances/bounceInDown bouncing-entrances/bounceInLeft bouncing-entrances/bounceInRight bouncing-entrances/bounceInUp

bouncing-exits

bouncing-exits/bounceOut bouncing-exits/bounceOutDown bouncing-exits/bounceOutLeft bouncing-exits/bounceOutRight bouncing-exits/bounceOutUp

fading-entrances

fading-entrances/fadeIn fading-entrances/fadeInDown fading-entrances/fadeInDownBig fading-entrances/fadeInLeft fading-entrances/fadeInLeftBig fading-entrances/fadeInRight fading-entrances/fadeInRightBig fading-entrances/fadeInUp fading-entrances/fadeInUpBig

fading-exits

fading-exits/fadeOut fading-exits/fadeOutDown fading-exits/fadeOutDownBig fading-exits/fadeOutLeft fading-exits/fadeOutLeftBig fading-exits/fadeOutRight fading-exits/fadeOutRightBig fading-exits/fadeOutUp fading-exits/fadeOutUpBig

flippers

flippers/flip flippers/flipInX flippers/flipInY flippers/flipOutX flippers/flipOutY

lightspeed

lightspeed/lightSpeedIn lightspeed/lightSpeedOut

rotating-entrances

rotating-entrances/rotateIn rotating-entrances/rotateInDownLeft rotating-entrances/rotateInDownRight rotating-entrances/rotateInUpLeft rotating-entrances/rotateInUpRight

rotating-exits

rotating-exits/rotateOut rotating-exits/rotateOutDownLeft rotating-exits/rotateOutDownRight rotating-exits/rotateOutUpLeft rotating-exits/rotateOutUpRight

sliders

sliders/slideInDown sliders/slideInLeft sliders/slideInRight sliders/slideOutUp sliders/slideOutLeft sliders/slideOutRight

specials

specials/hinge specials/rollIn specials/rollOut

Map

A powerful collection providing you all the functions you need to manipulate your Sass strings.

What's in there?

map-deep-get($map, $keys...): fetch nested keys map-deep-set($map, $keys..., $value ): update a key deeply nested map-depth($map): compute the maximum depth of a map map-has-keys($map, $keys): test if map got all $keys at first level map-has-nested-keys($map, $keys): test if map got all $keys nested with each others map-zip($keys, $values): an equivalent of zip function but for maps map-extend($map, $maps..., $deep): extend maps

List

A powerful collection providing you all the functions you need to manipulate your Sass lists.

What's in there?

sl-chunk(): returns whether list contains $value sl-comma-list(): initializes an empty comma-separated list sl-contain(): returns whether the list contains the value sl-count-values(): counts the number of occurrences of each value of list sl-debug(): returns list as a string sl-every(): returns whether all items from list pass test from given function sl-explode(): explodes a string into a list using a string as a delimiter sl-first(): returns first value in list sl-flatten(): turns multidimensional list into a one-level list sl-has-values(): checks if list is not empty sl-has-multiple-values(): checks if list has more than one value sl-insert-nth(): inserts value at index sl-intersection(): returns a list of shared values across all given lists sl-is-empty(): checks if list is empty sl-is-single(): checks if list has a single value sl-is-symmetrical(): checks if list is symmetrical sl-last(): returns last value in list sl-last-index(): returns last index of value in list sl-loop(): shifts indexes in list sl-prepend(): prepends value to list sl-purge(): removes all false and null values from list sl-random-value(): returns random value from list sl-range(): returns a list of values between 1 and given value sl-remove(): removes value in list sl-remove-duplicates(): removes duplicate values from list sl-remove-nth(): removes value at index sl-replace(): replaces value in list sl-replace-nth(): replaces value at index sl-reverse(): reverses list sl-shuffle(): shuffles list sl-slice(): slices list sl-sort(): sorts list sl-some(): returns whether some values from list pass test from given function sl-sum(): sums all unitless values in list sl-tail(): returns anything but the first element in list sl-to-list(): casts value as list sl-to-map(): casts list as map using indexes as keys sl-to-string(): casts list as string (JS .join()) sl-union(): returns a list of values from given lists minus duplicates sl-walk(): applies a function to every value of list

String

A powerful collection providing you all the functions you need to manipulate your Sass strings.

What's in there?

char-at($string, $index): returns the character from $string at index $index levenshtein($a, $b): returns the Levenshtein distance between $a and $b str-count($string, $needle): counts number of occurrences of $needle in $string str-ends-with($string, $needle): returns whether $string ends with $needle str-explode($string, $separator): explodes $string on $separator occurrences str-implode($list): implodes $list into a string str-last-index($string, $needle): returns last index of $needle in $string str-lcfirst($string): turns first letter of $string into lower case str-pad($string, $length, $pad: " ", $direction: left): pads $string with $pad to match $length starting from $direction str-printf($string, $elements...): replaces occurrences of %s in $string by elements from $elements str-repeat($string, $times): repeats $string $times times str-replace($string, $old, $new: ""): replaces $old by $new in $string respecting $case-sensitive str-reverse($string): reverses string str-rot($string, $rot: 13): rotates letters in $string of $rot position in alphabet str-shuffle($string): shuffles letters in string str-split($string): splits $string into a list of characters str-starts-with($string, $needle): returns whether $string starts with $needle str-trim($string): removes white spaces before and after $string str-ucfirst($string): turns first letter of $string into upper case str-word-count($string): counts number of words in $string stringify($literal): casts to stringify

As well as default Sass core functions:

str-index str-slice str-length str-insert to-lower-case to-upper-case

License

The MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.