Validate Breakpoint Sass Function

Validate Breakpoint

Type: Function

validateBreakpoint();

Resolves a breakpoint name to its width. Anything else that could be a size comes back as it is, because the function is also used in declarations, where a percentage or a CSS function is valid. null comes back as null, so a declaration built from it is left out.

Arguments

Name	Type	Description
`$value`	string \| number	Accepts a key from `$map-for-breakpoints`, a length, a percentage, or a CSS function such as `var()` or `min()`.

Examples

A breakpoint name used as a length.

Sass

.container {
  max-width: validateBreakpoint("large");
  margin: 0 auto;
}

CSS

.container {
  max-width: 992px;
  margin: 0 auto;
}

What it refuses

A word that is not a key, and a list. Until 2.3.1 a word came back unchanged and a list gave its first item, so a name missing from the map, or spelt in another case, compiled into CSS that did nothing.

Sass

.container {
  max-width: validateBreakpoint("huge");
}

Error: `huge` is not a breakpoint. $map-for-breakpoints has xsmall, small, medium, large, xlarge; pass one of those, or a length such as `600px`.