Gerillass 3.0.0 is out. One gradient mixin replaces two, and text-gradient takes its colours first, so read the migration guide before you upgrade.
Gerillass
v3.0.0* You can call mixins with or without the gls- namespace (e.g. @include gls-breakpoint();).
The Breakpoint Sass mixin helps you create scalable media queries and breakpoints using the @media CSS at-rule in SCSS.
Tip: There are predefined values for breakpoints in the _map-for-breakpoints.scss file based on Bootstrap's breakpoint values. You can add more values here to expand the list or replace existing ones with yours.
Arguments
| Name | Type | Description |
|---|---|---|
$mode | string | Sets the width media feature. Accepts the values only, min, max, and between. |
$value | number (with unit) | The width value at which your styles will be applied: a key from the breakpoint map, or a length in any unit a width condition takes, such as px, em, vw or cqi, including 0 and calc(). A percentage, a bare number, another unit and a word that is not a key are refused, because the query they produce never matches. It cannot be a custom property either: var() is not evaluated in a @media condition, so the rule would never apply, and the mixin refuses it. |
When you use the between option you must pass two values for width, and they must be separated by a space. See the [examples](#examples) for more.
Examples
One width on its own is a single pixel. breakpoint(320px) compiles to @media (width: 320px), so the styles apply only when the viewport is exactly 320px wide, and at every other width they do nothing. Since 2.2.0 the mixin prints a warning for that form. To style from a width upwards pass min, and for that exact width pass only.
Set the $mode option to only to apply styles at exactly one width. The code below will apply styles only if your browser's viewport is equal to 1200px.
.element{
@include breakpoint(only, 1200px) {
background-color: teal;
};
}@media (width: 1200px) {
.element {
background-color: teal;
}
}Now let's set the $mode option to min and pass a predefined breakpoint value. If you are a mobile-first person, you are going to use this one a lot!
.element{
@include breakpoint(min, medium) {
background-color: green;
};
}@media (min-width: 768px) {
.element {
background-color: green;
}
}For desktop-first arrangements, set the $mode option to max. This time, let's pass a custom value for the second argument.
.element{
@include breakpoint(max, 1024px) {
background-color: green;
};
}@media (max-width: 1024px) {
.element {
background-color: green;
}
}Tip: You can use predefined and custom values together if you like.
We can set a range between two values to apply our styles.
.element{
@include breakpoint(between, small 1200px) {
background-color: green;
};
}@media (min-width: 576px) and (max-width: 1200px) {
.element {
background-color: green;
}
}Important: Please examine how the predefined breakpoint values line up against each other in the code below.
Note that when you use the between mode with predefined values, the max-width value is always reduced by one. This prevents the styles you apply from overlapping each other.
.element{
@include breakpoint(between, small medium) {
background-color: green;
};
@include breakpoint(between, medium large) {
background-color: blue;
};
@include breakpoint(between, large xlarge) {
background-color: purple;
};
}@media (min-width: 576px) and (max-width: 767px) {
.element {
background-color: green;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.element {
background-color: blue;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.element {
background-color: purple;
}
}Reducing by one only happens with predefined values. When you work with custom values, you don't have to worry about it!
.element{
@include breakpoint(between, small 1199px) {
background-color: green;
};
@include breakpoint(between, 1200px 1400px) {
background-color: blue;
};
}@media (min-width: 576px) and (max-width: 1199px) {
.element {
background-color: green;
}
}
@media (min-width: 1200px) and (max-width: 1400px) {
.element {
background-color: blue;
}
}The values can be either custom numbers (with a unit) or predefined values.
Now let's define a range without passing the between option. Simply pass two values and separate them with a comma.
.element{
@include breakpoint(320px, 768px) {
background-color: teal;
};
}@media (min-width: 320px) and (max-width: 768px) {
.element {
background-color: teal;
}
}Now let's try it with the predefined values just to see that it works.
.element{
@include breakpoint(small, large) {
background-color: teal;
};
}@media (min-width: 576px) and (max-width: 991px) {
.element {
background-color: teal;
}
}What it refuses
A size no width condition can match stops the build. Until 2.3.1 these compiled: a name missing from the map went into the query as it was, so breakpoint(min, huge) wrote @media (min-width: huge), which a browser keeps and never applies, with nothing to say so. Measured in Chrome 152, the same was true of a percentage, a bare number such as 768, and a unit that is not a length.
.element {
@include breakpoint(min, huge) {
color: red;
}
}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`.The names are case-sensitive, so "MEDIUM" is refused the same way.
.element {
@include breakpoint(max, 50%) {
color: red;
}
}Error: `50%` cannot be used as a size in `breakpoint`: a width condition takes a length, and one written with `50%` would never match in @media. Pass a length such as `600px`, `40em` or `calc(30em + 1px)`, or a key from $map-for-breakpoints.A length written as a string, breakpoint(min, "600px"), still works, as it always has.