@stylize/sass-mixin

sass-mixin

Collection of Sass mixins for general usage

Table of Contents

• Flex
• Font
  • Face
  • Smoothing
• Media
• Position
  • Absolute
  • Fixed
  • Sticky
  • Relative
• Pseudo
• Size
  • Width
  • Height
• Support
• Z-index

Install

npm install @stylize/sass-mixin --save-dev

Other packages

Name	Description	Package
@stylize/sass-func	Func's for general usage
@stylize/sass-shape	Mixins for creating shapes

Usage

Mixins can be imported directly from the package or namespace.

@use '~@stylize/sass-mixin' as *

Overloading

Several mixins in this package support overloading, so you can use them in the usual way with named arguments or accept a list as an argument, which will be destructured.

// $args will be destructured to $arg1 and $arg2.
@include mixin($args: [])

// Receive in usual way with support of named arguments.
@include mixin($arg1: null, $arg2: null)

Flex

Flexbox Layout module (W3C Candidate Recommendation) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic.

Supports overloaded signature with single argument.

Display: flex

Element behaves like a block element and lays out its content according to the flexbox model.

@include flex($direction: null, $main: null, $cross: null, $wrap: null, $content: null)

Examples

// Default.
@include flex
// Row direction.
@include flex(row)
// Row direction with horizontal centering.
@include flex(row center)
// Column direction with vertical centering and left horizontally.
@include flex(column center flex-start)
// Column direction with vertical centering, left horizontally and wrap items.
@include flex(column, center, flex-start, wrap)
// Column direction with vertical centering, left horizontally, wrap items and align for multiline.
@include flex(column, center, flex-start, wrap, space-around)

Display: inline-flex

Element behaves like an inline element and lays out its content according to the flexbox model.

@include inline-flex($direction: null, $main: null, $cross: null, $wrap: null, $content: null)

Examples

// Default.
@include inline-flex
// Row direction.
@include inline-flex(row)
// Row direction with horizontal centering.
@include inline-flex(row center)
// Column direction with vertical centering and left horizontally.
@include inline-flex(column center flex-start)
// Column direction with vertical centering, left horizontally and wrap items.
@include inline-flex(column, center, flex-start, wrap)
// Column direction with vertical centering, left horizontally, wrap items and align for multiline.
@include inline-flex(column, center, flex-start, wrap, space-around)

Shorthands

Package additionally provides the shorthands *-row, *-row-center, *-col, *-col-center, which behave the same way, but take fewer parameters.

Example of flex mixin for row direction with center alignment:

@include flex-row-center($wrap: null, $content: null)

Font

Mixin defines the shorthand for Font with CSS properties font-size, line-height, font-weight and font-family.

Supports overloaded signature with single argument.

@include font($size: null, $line: null, $weight: null, $family: null)

Examples

// Default.
@include font
// Font size.
@include font(10px)
// Font size, line-height.
@include font(10px 1rem)
// Font size, line-height, font-weight.
@include font(10px, 1rem, 300)
// Font size, line-height, font-weight, font-family.
@include font(10px, 1rem, 300, (Arial, san-sarif))

Font Face

Mixin defines the shorthand for Font-Face.

@include font-face($name, $path, $ext: [woff, woff2], $local: null)

Examples

// Font face in modern formats [woff, woff2].
@include font-face(Roboto, '..fonts/roboto')
// Font face in custom formats [eot, svg, ttf].
@include font-face(Roboto, '..fonts/roboto', [eot, svg, ttf])
// Font face in modern formats with priority to local font.
@include font-face(Roboto, '..fonts/roboto', $local: Arial)

Smoothing

font-smoothing mixin enable anti-aliasing when fonts are rendered.

Media

Media Queries are useful to modify site or application depending on the general type of device (e.g., print vs screen) or specific characteristics and parameters (e.g., screen resolution or browser viewport width). Media query is composed of an optional media type and any number of media feature expressions. Multiple queries can be combined in various ways by using logical operators.

Mixin defines the advanced shorthand for media queries with advantage over other solutions in the configurable settings and caching.

@include media($conditions...)

Examples

// Eq height 200px.
@include media('h=200px')
// Min width 201px.
@include media('>200px')
// Max or eq width 200px.
@include media('w<=200px')
// Orientation portrait.
@include media('portrait')
// Min width 769px AND min height 768px.
@include media('w>sm', 'h<=sm')
// Native media query for resolution (can use : instead of =).
@include media('resolution=192dpi')
// Screen with min width 769px OR print with min height 768px.
@include media((group1: screen 'w>sm', group2: print 'h<=sm'))

Operators

Mixin supports a number of operators that determine whether the min and max prefixes should be added:

• < Less than.
• > Greater than.
• =, : Equal.
• <=, ≤ Less than or equal.
• >=, ≥ Greater than or equal.

The logical operators and, and or (,) can be defined by the arguments type. In case list is one of the arguments, the media conditions will be combined by the and operator; in the case of map argument the conditions will be combined by the or operator.

Px vs Em

Default breakpoints are defined in px, and can be changed to em to support zooming.

// Em with default size.
@include use-em

// Em with custom base size.
@include use-em(20px)

Keywords

Defines the keywords for standard media feature.

Default keywords are w for width, h for height.

$keywords: ('w': 'width', 'h': 'height') !default

// Dynamically add the keyword.
@include add-keyword($keyword, $feature)

Shortcuts

Defines the shortcut for media query, which can be referred to by unique name.

Default shortcuts are portrait, landscape, retina2x, retina3x.

$shortcuts: () !default

// Dynamically add the shortcut.
@include add-shortcut($name, $condition)

Breakpoints

Predefined breakpoints used with media feature.

$breakpoints: (mc: 360px, xs: 480px, sm: 768px, md: 1024px, lg: 1200px, xl: 1440px) !default

// Dynamically add the breakpoint.
@include add-breakpoint($name, $value)

Position

The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. z-index determine the stack order and can be individually configured by the corresponding mixin or sass-func.

Supports overloaded signature with single argument.

@include position($position, $top: null, $right: null, $bottom: null, $left: null, $z: null)

Examples

// Relative with top 0.
@include position(relative 0)
// Relative with left 0.
@include position(relative, $left: 0)
// Relative with top 0, right 2px, left 3px, z-index 1.
@include position(relative, 0, 2px, null, 3px, 1)
// Relative with top 0, right 2px, left 3px, z-index keyword `header`.
@include position(relative, 0, 2px, null, 3px, header)

Relative

Mixin defines the shorthand for relative position.

@include relative($top: null, $right: null, $bottom: null, $left: null, $z: null)

Examples

// Relative with left 0.
@include relative($left: 0)
// Relative with top 0, right 2px, left 3px.
@include relative(0, 2px, 3px)
// Relative with top 0, right 2px, left 3px, z-index 1.
@include relative(0 2px null 3px 1)
// Relative with top 0, right 2px, left 3px, z-index keyword `header`.
@include relative(0, 2px, null, 3px, header)

Absolute

Mixin defines the shorthand for absolute position.

@include absolute($top: null, $right: null, $bottom: null, $left: null, $z: null)

Examples

// Absolute with left 0.
@include absolute($left: 0)
// Absolute with top 0, right 2px, left 3px.
@include absolute(0, 2px, 3px)
// Absolute with top 0, right 2px, left 3px, z-index 1.
@include absolute(0 2px null 3px 1)

Shorthand to cover the parent container using absolute.

@include absolute-cover($offset: 0, $z: null)

Examples

// Absolute with offset 0.
@include absolute-cover
// Absolute with offset 2px.
@include absolute-cover(2px)
// Absolute with offset 0, z-index 1.
@include absolute-cover($z: 1)

Shorthand to align at center in parent container using absolute.

@include absolute-center($z: null)

Shorthands

Package additionally provides the shorthands absolute-top-left, absolute-top-right, absolute-bottom-left, absolute-bottom-right, which behave the same way and set zero offset to corresponding directions.

Fixed

Mixin defines the shorthand for fixed position.

@include fixed($top: null, $right: null, $bottom: null, $left: null, $z: null)

Examples

// Fixed with left 0.
@include fixed($left: 0)
// Fixed with top 0, right 2px.
@include fixed(0, 2px)
// Fixed with top 0, right 2px, left 3px, z-index 1.
@include fixed(0 2px null 3px 1)

Shorthand to cover the parent container using fixed.

@include fixed-cover($offset: 0, $z: null)

Examples

// Fixed with offset 0.
@include fixed-cover
// Fixed with offset 2px.
@include fixed-cover(2px)
// Fixed with offset 0, z-index 1.
@include fixed-cover($z: 1)

Shorthand to align at center in parent container using fixed.

@include fixed-center($z: null)

Shorthands

Package additionally provides the shorthands fixed-top-left, fixed-top-right, fixed-bottom-left, fixed-bottom-right, which behave the same way and set zero offset to corresponding directions.

Sticky

Mixin defines the shorthand for sticky position.

@include sticky($top: null, $right: null, $bottom: null, $left: null, $z: null)

Examples

// Sticky with left 0.
@include sticky($left: 0)
// Sticky with top 0, right 2px.
@include sticky(0, 2px)
// Sticky with top 0, right 2px, left 3px, z-index.
@include sticky(0 2px null 3px 1)

Shorthand to cover the parent container using sticky.

@include sticky-cover($offset: 0, $z: null)

Examples

// Sticky with offset 0.
@include sticky-cover
// Sticky with offset 2px.
@include sticky-cover(2px)
// Sticky with offset 0, z-index 1.
@include sticky-cover($z: 1)

Shorthand to align at center in parent container using sticky.

@include sticky-center($z: null)

Shorthands

Package additionally provides the shorthands sticky-top-left, sticky-top-right, sticky-bottom-left, sticky-bottom-right, which behave the same way and set zero offset to corresponding directions.

Pseudo

Mixin defines the shorthand for after / before pseudo.

@include before($content: '')
  // @content

@include after($content: '')
  // @content

Size

Mixin defines the shorthand for complex (eq, min, max) width and height.

@mixin size($width: null, $height: $width)

Examples

// [eq] width.
@include size(10px)
// [min] width.
@include size(min 10px)
// [min] width, [max] height.
@include size(min 10px, max 20px)
// [eq, min] width, [max] height.
@include size([30px, min 10px], max 20px)
// [eq, min] width, [min, max] height.
@include size([30px, min 10px], [min 10px, max 20px])

Width

Mixin defines the shorthand for complex (eq, min, max) width.

@mixin width($args...)

Examples

// [eq] width.
@include width(10px)
// [min] width.
@include width(min 10px)
// [min, max] width.
@include width(min 10px, max 30px)

Height

Mixin defines the shorthand for complex (eq, min, max) height.

@mixin height($args...)

Examples

// [eq] height.
@include height(10px)
// [min] height.
@include height(min 10px)
// [min, max] height.
@include height(min 10px, max 30px)

Support

Mixin determine whether hover is supported.

@include support-hover

Examples

// Capitalize link on hover.
@include support-hover
  &:hover
    text-transform: capitalize

Z-index

Mixin use the sass-func to handle the z-index.

@include z-index($path...)

@include set-order($config, $base: 0)

Examples

// Configure by list and base.
@include set-order(footer header, 100)
// Configure by complex map.
@include set-order((layout: (cashier: (toggle: 2))))

// Z-index [101] by base.
@include z-index(footer)
// Z-index [2] by complex path.
@include z-index(layout cashier toggle)