Record Collection

dmbdesignpdx edited this page Feb 2, 2018 · 13 revisions

Custom Mixins


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
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.