General

variables

mediaBreakpoints

$mediaBreakpoints: (
	"phone": 480px,
	"tablet": 768px,
	"desktop": 1024px
) !default;

Description

Breakpoints which control the value when using ">", "<", ">=", "<=" or "=".

Example

Create breakpoints with the labels "tablet" and "desktop"

$mediaBreakpoints: (
	"tablet": 768px,
	"desktop": 1024px
);

Used by

[function] mediaAddBreakpoints

Author

Willis Shek

mediaExpressions

$mediaExpressions: (
	"landscape": "(orientation: landscape)",
	"portrait": "(orientation: portrait)",
	"!": "not all and",
	// and
	"&": "and",
	"&&": "and",
	// or
	"or": ",",
	"|": ",",
	"||": ",",
) !default;

Description

Expressions for fast conversion.

Example

Create an expression for "(orientation: landscape)"

$mediaExpressions: (
	"landscape": "(orientation: landscape)"
);

Used by

[function] mediaAddExpressions

Author

Willis Shek

mediaUnitSteps

$mediaUnitSteps: (
	"px": 1,
	"em": 0.01,
	"rem": 0.01,
	"none": 0.001 // for value with no unit, aspect ratio mainly
) !default;

Description

The smallest values for different units that will be added or subtracted for exclusive intervals (">" and "<")

Example

Create steps for px and em

$mediaUnitSteps: (
	"px": 1,
	"em": 0.01
);

Author

Willis Shek

functions

mediaAddBreakpoints

@function mediaAddBreakpoints($newBreakpoints) { ... }

Description

Function for convenient adding breakpoints

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$newBreakpoints`	The new breakpoints to be added	`Map`	— none

Example

add a new breakpoint

$mediaBreakpoints: mediaAddBreakpoints(("retina": 1920px));

Requires

[variable] mediaBreakpoints

Author

Willis Shek

mediaAddExpressions

@function mediaAddExpressions($newExpressions) { ... }

Description

Function for convenient adding expressions

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$newExpressions`	The new expressions to be added	`Map`	— none

Example

add a new expressions

$mediaExpressions: mediaAddExpressions(("small": "<=phone"));

Requires

[variable] mediaExpressions

Author

Willis Shek

mixins

media

@mixin media($expressionString) { ... }

Description

mixin for create media query

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$expressionString`	Input string for creating media query	`String`	— none

Author

Willis Shek