Gerillass
v2.1.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.
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. |
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
Simply call the mixin and pass a custom value to it. The code below will apply styles only if your browser's viewport is equal to 320px.
.element{
@include breakpoint(320px) {
background-color: green;
};
}@media (width: 320px) {
.element {
background-color: green;
}
}If you set the $mode option to only, you will see that the result is similar to the first example. 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;
}
}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;
}
}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;
}
}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;
}
}