SASS STYLER

Modular scss utility library to build better styles faster

Install

npm i sass-styler

Table of Content

Styler is made up of mixins, functions and variables

Table of Content

Mixins

angled-edge  

Add an angled edge to a container using a generated SVG

@include angled-edge($fill, $height, $location, $hypotenuse, $width, $selector)

Type: mixin

Parameters:

Requires: get, svg-base64

File source: src/angled-edge.scss

angled-tritone-background  

A tritone angled CSS background

@include angled-tritone-background($base, $color1, $color2, $angle1, $angle2, $position1, $position2)

Type: mixin

Parameters:

File source: src/angled-tritone-background.scss

apply  

Add multiple extends

@include apply($keywords)

Type: mixin

Parameters:

Requires: str-split, escape-classname

File source: src/apply.scss

aspect-ratio-padding  

The padding trick to keep a container the same ratio in different screen sizes

@include aspect-ratio-padding($x, $y, $position)

Type: mixin

Parameters:

File source: src/aspect-ratio-padding.scss

background-stripes  

Background gradient stripes from a list of colors

@include background-stripes($direction, $colors)

Type: mixin

Parameters:

File source: src/background-stripes.scss

clearfix  

Prevent elements flowing around floating elements

@include clearfix($selector)

Type: mixin

Parameters:

File source: src/clearfix.scss

container  

Create a width-limited container with side-margin on smaller screens

@include container($width, $margin)

Type: mixin

Parameters:

Requires: calc-add

File source: src/container.scss

cover-link  

Cover a container with a link

@include cover-link($selector, $position, $z-index)

Type: mixin

Parameters:

Requires: position

File source: src/cover-link.scss

declare-map  

Declare properties via sass maps

@include declare-map($map)

Example:

@include declare-map((color: red, margin: 0));                       /* color: red; margin: 0; */
@include declare-map((color: red, "&:hover": (color: blue)));         /* color: red; &:hover { color: blue; } */
@include declare-map((color: red, "&:hover, &:focus": (color: blue))); /* color: red; &:hover, &:focus { color: blue; } */

Type: mixin

Parameters:

Requires: str-replace

File source: src/declare-map.scss

elevation  

Add box shadow based on elevation settings

@include elevation($level, $color)

Type: mixin

Parameters:

Requires: elevation

File source: src/elevation.scss

extend-background  

Extend the background sideways of a container

@include extend-background($background, $position, $z-index)

Type: mixin

Parameters:

File source: src/extend-background.scss

flex-grid  

Create a flexbox grid from the wrapper and direct children elements

@include flex-grid($columns, $gap, $gap, $justify-content, $align-items, $selector)

Type: mixin

Parameters:

Requires: selector-combine, grid-column-width

File source: src/flex-grid.scss

hardware-accelerate  

Turn on the hardware acceleration of the browser for element

@include hardware-accelerate($perspective, $hide-backface)

Type: mixin

Parameters:

File source: src/hardware-accelerate.scss

hide-text-except-pseudo  

Hide text within a container but keep pesudo elements visible

@include hide-text-except-pseudo($font-size, $color, $line-height, $font-family, $text-align)

Type: mixin

Parameters:

File source: src/hide-text-except-pseudo.scss

hide-visually  

Visually hide an element

@include hide-visually($position, $overflow, $visibility, $opacity, $left)

Type: mixin

Parameters:

File source: src/hide-visually.scss

horizontal-list  

Make a list horizontal

@include horizontal-list($gap, $justify-content, $align-items, $flex-wrap)

Type: mixin

Parameters:

File source: src/horizontal-list.scss

icon-item  

Align an icon and text next to one another

@include icon-item($icon-size, $gap, $side, $justify-content, $align-items, $align-icon)

Type: mixin

Parameters:

File source: src/icon-item.scss

increment-z-index  

Increment z-index value for each element in a container

@include increment-z-index($from, $to, $index, $selector)

Type: mixin

Parameters:

File source: src/increment-z-index.scss

inner-container  

Set styles for containers without media queries where you use a main and a wrapper element

@include inner-container($width, $padding, $inner-selector)

Type: mixin

Parameters:

File source: src/inner-container.scss

keyframes  

Add CSS animation only once

@include keyframes($name)

Type: mixin

Parameters:

Requires: merge, _keyframes

File source: src/keyframes.scss

loader  

Create a dynamic, animated CSS circle loader spinner

@include loader($color, $bg, $size, $width, $animation-speed, $inner-opacity, $inner-color)

Type: mixin

Parameters:

Requires: pseudo-with-position, keyframes

File source: src/loader.scss

media  

Generate media queries via saved keywords or simplified syntax

@include media($query...)

Example:

@include media(1024px);                    /* @media (min-width: 1024px) */
@include media(800px 1024px);              /* @media (min-width: 800px) and (max-width: 1024px) */
@include media(max 1024px);                /* @media (max-width: 1024px) */
@include media(620px, max 1024px);         /* @media (min-width: 620px), (max-width: 1024px) */
$media-queries: (
  large: 1024px,
  wide: 75rem,
  dark: "(prefers-color-scheme: dark)"
);
@include media(large);                     /* @media (min-width: 1024px) */
@include media(max large);                 /* @media (max-width: 1023px) */
@include media(wide);                      /* @media (min-width: 75rem) */
@include media(max wide);                  /* @media (max-width: 74.999rem) */
@include media(large wide);                /* @media (min-width: 1024px) and (max-width: 74.999rem) */
@include media(dark large wide);           /* @media (prefers-color-scheme: dark) and (min-width: 1024px) and (max-width: 74.999rem) */

Type: mixin

Parameters:

Requires: media

File source: src/media.scss

menu-icon  

Generate a menu icon from a single element

@include menu-icon($color, $border-radius, $width, $height, $gutter, $transition-duration)

Type: mixin

Parameters:

Requires: calc-add, calc-substract

File source: src/menu-icon.scss

menu-icon-close  

Morph menu icon to a close (x) icon

@include menu-icon-close($color)

Type: mixin

Parameters:

Requires: calc-add, calc-substract

File source: src/menu-icon.scss

normalize  

Normalize with best practices combined from bootstrap, tailwind, etc

@include normalize($root)

Type: mixin

Parameters:

Requires: media

File source: src/normalize.scss

object-fit  

Create object fitted elements

@include object-fit($object-fit, $object-position, $position, $width, $height)

Type: mixin

Parameters:

File source: src/object-fit.scss

on-circle  

Mixin to place items on a circle

@include on-circle($item-count, $circle-size, $item-size)

Type: mixin

Parameters:

File source: src/on-circle.scss

pipe-list  

Make a list horizontal and add a pipe separator (border) between the items

@include pipe-list($gap, $border, $justify-content, $align-items, $flex-wrap)

Type: mixin

Parameters:

File source: src/pipe-list.scss

position  

Set position top, right, bottom, left, position, width, height and z-index values

@include position($top, $right, $bottom, $left, $position, $width, $height, $z-index)

Type: mixin

Parameters:

File source: src/position.scss

pseudo-with-position  

Add a pseduo element with position

@include pseudo-with-position($top, $right, $bottom, $left, $position, $width, $height, $z-index, $content, $display, $selector)

Type: mixin

Parameters:

Requires: pseudo, position

File source: src/pseudo-with-position.scss

pseudo  

Add a pseduo element

@include pseudo($content, $display, $selector)

Type: mixin

Parameters:

File source: src/pseudo.scss

replace-context  

Replace part of the current selector

@include replace-context($from, $to, $select-after)

Type: mixin

Parameters:

File source: src/replace-context.scss

reset  

Reset styles

@include reset

Type: mixin

File source: src/reset.scss

scrollbar  

Style scrollbars

@include scrollbar($width, $track-color, $thumb-color, $thumb-hover-color, $scrollbar-width)

Type: mixin

Parameters:

File source: src/scrollbar.scss

search-icon  

Generate a search icon from a single element

@include search-icon($color, $border-radius, $size, $thickness, $transition-duration)

Type: mixin

Parameters:

File source: src/search-icon.scss

search-icon-close  

Morph search icon to a close (x) icon

@include search-icon-close($color)

Type: mixin

Parameters:

File source: src/search-icon.scss

select  

Select common element groups via shorthands

@include select($key)

Type: mixin

Parameters:

Requires: select

File source: src/select.scss

triangle  

CSS-only triangle

@include triangle($direction, $color, $size, $selector)

Type: mixin

Parameters:

File source: src/triangle.scss

truncate  

Truncate text in a container

@include truncate($width)

Type: mixin

Parameters:

File source: src/truncate.scss

unhide-visually  

Unhide a previously visually hidden element

@include unhide-visually($position, $overflow, $visibility, $opacity, $left)

Type: mixin

Parameters:

File source: src/unhide-visually.scss

unstyled-list  

Remove list styles

@include unstyled-list

Type: mixin

File source: src/unstyled-list.scss

Functions

asset  

Get an asset url prepended by a default base path

asset($file)

Type: function

Parameters:

Requires: asset-path

File source: src/asset.scss

@function asset($file) {
    @return url($asset-path + $file);
}

best-contrast  

Get the best contrasting color from a list of colors compared to a base

best-contrast($base, $colors, $tolerance)

Type: function

Parameters:

Requires: contrast-between

File source: src/best-contrast.scss

@function best-contrast($base, $colors, $tolerance) {
    $best: list.nth($colors, 1);
    $contrast: contrast-between($base, $best);
    @for $i from 2 through list.length($colors) {
        $current: list.nth($colors, $i);
        $current-contrast: contrast-between($base, $current);
        @if $current-contrast - $contrast > $tolerance {
            $best: $current;
            $contrast: $current-contrast;
        }
    }
    @return $best;
}

blacken  

Mix a color with black

blacken($color, $ratio)

Type: function

Parameters:

File source: src/blacken.scss

@function blacken($color, $ratio) {
    @return color.mix(#000, $color, $ratio);
}

calc-add  

Add 2 n