Record Collection

Custom Mixins

• animate
• between
• bound
• change
• circle
• flowage
• heart
• max
• min
• numName
• opague
• oval
• parallelogram
• postName
• preName
• ratio
• size
• target
• there
• triangle
• view
• where
• xy

animate()

Transform with Transition and Transform-Origin

@include animate($transform, $transition [, $transform-origin]);

$transform

CSS transform value

$transition

CSS transition value as a Variable Object

$transform-origin

(optional) CSS transform-origin value

between(){};

Media Query with Min-width and Max-width

@include between($min, $max){ content };

$min

Pixel value

$max

Pixel value

bound()

SVG Stroke Shorthand

@include bound($size $color [$type]);

$size

Number value

$color

Color value

$type

(optional) dashed or dotted

change()

Transform with Transform-Origin

@include change($transform, $transform-origin);

$transform

CSS transform value

$transform-origin

CSS transform-origin value

circle()

Create a Circle

@include circle($diameter);

$diameter

Pixel value

flowage()

Overflow X and Y Shorthand

@include flowage($x $y);

$x

CSS overflow-x value

$y

CSS overflow-y value

heart()

Create a Heart

@include heart($width, $color);

$width

Pixel value

$color

Color value

max(){}

Media Query with Max-width

@include max($breakpoint) {
   // content
};

$breakpoint

Pixel value

min(){}

Media Query with Min-width

@include min($breakpoint) {
   // content
};

$breakpoint

Pixel value

numName(){}

Create Classes/IDs with a Common Name and Sequential Numbers

@include numName($type, $name, $end [, $start]) {
   // content
};

$type

class or id

$name

Text value

$end

Number value. Defines number to stop at.

$start

(optional) Number value. Defines what number to start with. Default is 1.

opaque()

Opacity with Blend Mode

@include opaque($amount, $type);

$amount

Number value (0–1)

$type

Type of blend mode (multiply, screen, etc.)

oval()

Create an Oval

@include oval($width $height);

$width

Pixel value

$height

Pixel value

parallelogram()

Create a Parallelogram

@include parallelogram($width $height, $skew);

$width

Pixel value

$height

Pixel value

$skew

Degree value

postName(){}

Create Classes or IDs of a Common Name with Different Suffixes

@include postName($type, $suffix, $names) {
   // content
};

$type

class or id

$suffix

Text value

$names

Text value. Comma seprated list.

preName(){}

Create Classes or IDs of a Common Prefix with Different Names

@include preName($type, $prefix, $names) {
   // content
};

$type

class or id

$prefix

Text value

$names

Text value. Comma seprated list.

ratio()

Have an Element Maintain a Ratio

@include ratio($width [, $length]);

$width

Number value

$length

(optional) Number value. If blank, 1:1 ratio is assumed.

size()

Width and Height Shorthand

@include size($width [$height]);

$width

Pixel/Percentage value

$height

(optional) Pixel/Percentage value. If blank, height is assumed to be the same as width.

target(){}

Target a browser using a predifined @supports argument

@include target($browser) { 
	// content 
};

$browser

Text value. blink (for Chrome and Opera), safari, firefox, edge

there()

Absolute Positioning Shorthand (Left-Start)

@include there($left [$top] [$right] [$bottom]);

$left

Pixel value or auto to skip. If only left value: top, right, and bottom are assumed to be the same value.

$top

(optional) Pixel value or auto to skip. If only left and top values: bottom is assumed to be the same as top and right the same as left.

$right

(optional) Pixel value auto to skip. If only left, top, and right values: bottom value is assumed to be the same as top.

$bottom

(optional) Pixel value or auto to skip.

triangle()

Create a Triangle

@include triangle($width $height, $color [, $rotate]);

$width

Pixel value

$height

Pixel value

$color

Color value

$rotate

(optional) Degree value

view()

Perspective with Perspective-Origin

@include view($perspective, $perspective-origin);

$perspective

CSS perspective value

$perspective-origin

CSS perspective-origin value

where()

Absolute Positioning Shorthand (Top-start)

@include where($top [$right] [$bottom] [$left]);

$top

Pixel value or auto to skip. If only top value: right, bottom, and left are assumed to be the same value.

$right

(optional) Pixel value or auto to skip. If only top and right values: bottom is assumed to be the same as top and left the same as right.

$bottom

(optional) Pixel value auto to skip. If only top, right, and bottom values: left value is assumed to be the same as right.

$left

(optional) Pixel value or auto to skip.

xy()

Position with Left and Top

@include xy($left $top);

$left

Pixel/Percentage value

$top

Pixel/Percentage value