The entry point of the whole Sass Pal system. Utility maps have builder mixin names as keys and actual instructions as values (whose type depends on the builder). You can provide a more complex map to scope utility maps on specific devices, so that keys are device queries and values are request maps

A set of rules as described by the passed request map(s)

Chooses the right builder mixin based on its name and calls it

Rules defined by called builder mixins

Sass Pal builder for border-* rules. Any 'default' or missing value is replaced by its default. Any null value is explicitly not set instead.

Border related rules

Sass Pal builder for color rules. It accepts either a map or a list. If given strings instead of native colors, Sass Pal converts the strings into native colors based on values stored into the 'colors' key of the store.

Color related rules

Sass Pal builder to output CSS directly, it's just a bypass. Useful for readability. It accepts a map where key is CSS rule and value is whatever that rule accepts

Native css declaration

Sass Pal builder for Flexbox rules. All properties are optional. All passed values can be either a custom value (ex.: grow: 'more'), an alias (ex.: 'start' for 'flex-start') or any native value for that CSS rule

Shortcut

If input is 'center', output the rules for centering content (see Shortcut with 'center' example)

Aliases

• start for flex-start
• end for flex-end
• between for space-between
• around for space-around
• evenly for space-evenly

Properties for flex containers

• dir
  • type: String
  • note: Also accepts anything flex-direction accepts
• inline
  • type: Bool
  • note: Outputs display: inline-flex
• wrap
  • type: Bool
  • values: true|false
• main-axis
  • type: String
  • aliases: start|end|between|around
  • note: Also accepts anything justify-content accepts
• cross-axis
  • type: String
  • aliases: start|end
  • note: Also accepts anything align-items accepts
• cross-lines
  • type: String
  • aliases: start|center|end|between|around
  • note: Also accepts anything align-content accepts

Properties for flex items

• self-align
  • type: String
  • alias: start|end
  • note: Also accepts anything align-self accepts
• basis
  • type: Number|String
  • values: Any of the defined relative-units (ex.: 'third')
  • note: Also accepts anything flex-basis accepts
• grow
  • type: Number|String
  • values: 'no'|'normal'|'more' or custom Number
  • note: Also accepts anything flex-grow accepts
• shrink
  • type: Number|String
  • values: 'least'|'less'|'normal'|'more'|'most' or custom Number
  • note: Also accepts anything flex-shrink accepts
• order
  • type: Number|String
  • values: 'first'|'last' or custom Number
  • note: Also accepts anything order accepts
• flex
  • type: List
  • values: Any valid List for native flex CSS rule

Flexbox rules

Sass Pal builder for position rules. Accepts a list where the first value is a string for 'position' CSS rule and the second value is a list of 1, 2 or 4 numbers, which are interpreted as

• 4 values: top, right, bottom, left (clockwise convention)
• 2 values: top and bottom, right and left
• 1 value: the same for every side

If instead of any number a null is passed, no rule is defined accordingly. If unitless values are used, they are treated as Sass Pal absolute units

Position-related rules

Sass Pal builder for size rules (width, height, min-* and max-*). Sizes follow the syntax

{RULE_ABBREVIATION}-{RELATIVE_UNIT}

Where

• RULE_ABBREVIATION is any of w, w-min, w-max, h, h-min, h-max
• RELATIVE_UNIT is one of the labels from the relative-units stored value, ex.: '1/2', 'full'

Size related rules

Sass Pal builder for spacing rules (margins, paddings). Each spacing is a string with the pattern

{RULE_KEY}{SIDE_KEY}{UNIT_KEY}

• RULE_KEY is a rule key ('m' for margin or 'p' for padding)
• SIDE_KEY is any side key (@see $_PAL_STORE.pal.sides)
• UNIT_KEY is any of declared units (@see $_PAL_STORE.units)

Margin and/or padding rules

Extracts a color from the defined palette. It's just an alias for pal-get('color.xxx')

Groups request maps by the same device query so that Sass Pal will output less @media queries. Device queries differing only in pseudo-classes are grouped together

Checks if map is a collection of device-scoped request maps or not

Breaks down an input device query into a map with properties. A device query is a string following this syntax

{DEVICE}{OPERATOR}{PSEUDO_CLASS}

Where

• DEVICE can be any allowed device or * wildcard for 'all devices'
• OPERATOR can be
  • '+' meaning 'from DEVICE min resolution upward'
  • '-' meaning 'from DEVICE max resolution downward'
  • '' or '=' means 'between DEVICE min and max resolution only'
• PSEUDO_CLASS can be any pseudo-class (see pseudo-classes stored value for more), ex.:
  • ':hover'
  • ':focus'
  • ':active'

Parses any sides combination as a string to the proper list of sides. Always returns a list even for one side. Input strings are words composed of the letters

• t (top)
• r (right)
• b (bottom)
• l (left)

Special modifiers are

• * is a bypass for all sides
• ^ or - negates a side, ex.: ^t: (right, bottom, left)

Transforms a string with a suffix via Sass Pal's stored values (units or relative-units), otherwise it just returns the number as it is. If given an unitless integer it treats it as units.

If given a string, it's used as key and it returns a Sass Pal's stored value using the given $from prefix. Any other value is returned as it is

Extracts a stored value by its key. Accepts a dot-separated nested query

Merges a given map (the merge map) into an existing map (the stored map) inside the store, key by key

• If stored map does not exist, store merge map as a new item of the store
• If stored map does exist into the store
  • Keys existing only into the stored map are preserved
  • Keys existing in both maps are chosen from the merge map (overwrite)
  • Keys existing only into the merge map are added to the stored map
• Works only when adding a map to an existing map in the store*

Sets a new key-value into the Sass Pal store by dispatching an action. If the action has a reducer, some logic is performed, otherwise the value is set or overwritten as it is.

This outputs the normalize.css v8.0.1 from github.com/necolas/normalize.css

normalize.css v8.0.1

This outputs the reset v2.0 20110126 from http://meyerweb.com/eric/tools/css/reset/

reset v2.0 20110126

Runs all the reducers. By default, reducers must create

Updates the 'devices' key of the store Substracts a tiny length to the upper end resolutions so that @media queries do not overlap Stores 'devices'

Transforms all relative units of the payload to percentages before storing Stores 'relative-units'

Adjusts all existing units with the new base unit Stores 'unit' and 'units'

Multiplies all units by the base unit Stores 'units'

Map of default colors. Key: color name, value: color as RGB

Map of default devices. Key: device name, value: list with min and max resolution

List of default pseudo-classes. Avoid adding pseudo-class functions like :host() (:host is fine)

Default relative units. Key: label, value: number. The reducer turns them into percentages

All Sass Pal stored values are stored here. Unmodifiable values are already set inside the 'pal' key

Default base unit, multiplies all other units

Default absolute units. Key: label, value: number. The reducer multiplies them by the base unit

Compares any two Sass values and returns true if they contain the same data. They don't have to be the same reference

Returns an element from the list by its index. Returns null if index doesn't exist

Transforms a plain list into a string

Sorts a list of strings by descending string length

Checks if all given keys in a map are set and have non-null values

Extracts values from a map, given a list of keys (also nested keys, see pal-map-get())

Extends the Sass built-in map-get() by allowing to get nested values like you would do in JavaScript, ex.: pal-map-get($map, 'foo.bar.baz');

You can pass it dot-separated queries to access nested values

Checks if input map has any of the given keys (with non-null values)

Updates a map with a new value for a given key. Overwrites existing keys

Returns the length unit of the passed number as a string (ex.: 'px', 'rem'). If input has no unit, an empty string is returned

Returns the length unit of the passed number as a string (ex.: 'px', 'rem'). If input has no unit, an empty string is returned

Always returns the half + 1 as an integer of any integer input. Input number should be unitless

Returns whether the input number has a length unit or not

Returns whether the input number is an integer or not

Casts a number to string

Returns the alphabet both lowercase and uppercase, optionally

Extract a single character from a string given its 1-based index (see examples). Accepts negative integers as it's an alias of the native str-slice.

Checks if a string is a valid CSS class according to https://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors and http://www.w3.org/TR/CSS21/grammar.html#scanner

Splits given string by the given separator into a plain list

Checks if a given string starts with a given substring

Wrap all its content into a media query based on given arguments

Input rules wrapped in a custom @media query

Wraps given content into a pseudo-selector. It uses the parent selector & so make sure to use this inside a class. You can optionally provide a custom parent selector to use. It has no effect if you pass a bypass, like '*' or 'any'

Input rules wrapped in chosen pseudo class