Breakpoint

Type: Mixin

@include breakpoint();

* You can call mixins with or without gls- namespace (e.g. @include gls-breakpoint();).

Breakpoint Sass mixin helps you to create scalable media queries and breakpoints by using the @media CSS at-rule in SCSS.

Tip: There are predefined values for breakpoints in the _map-for-breakpoints.scss file based on Bootstraps’ breakpoint values. You can add more values here to expand the list or replace existing ones with yours.

Github Source Code

Arguments

Name	Type	Description
`$mode`	`string`	Sets the `width` media feature. Accepts `only`, `min`, `max` or `between` values.
`$value`	`number (with unit)`	The width value to which your styles will be applied.

* When you use between option you must pass two values for width and they must be seperated by space. For more see the examples.

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;
  };
}

//CSS Output
@media (width: 320px) {
  .element {
    background-color: green;
  }
}

If you set the $mode option to only you’ll see that the result will be as similar as 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;
  };
}

//CSS Output
@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;
  };
}

//CSS Output
@media (min-width: 768px) {
  .element {
    background-color: green;
  }
}

For desktop-first arrangements set the $mode option to max and this time let’s pass a custom value for the second argument.

.element{
  @include breakpoint(max, 1024px) {
    background-color: green;
  };
}

//CSS Output
@media (max-width: 1024px) {
  .element {
    background-color: green;
  }
}

We can set a range between two values to apply our styles.

Tip: You can use predefined and custom values together if you like.

.element{
  @include breakpoint(between, small 1200px) {
    background-color: green;
  };
}

//CSS Output
@media (min-width: 576px) and (max-width: 1200px) {
  .element {
    background-color: green;
  }
}

Note that when using the between mode with predefined values, the max-width value will always be extracted by one. This setting prevents the styles you apply from overlapping each other.

Important: Please, examine how predefined breakpoint values bounce among themselves correctly in the code below.

.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;
  };
}

//CSS Output
@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;
  }
}

Extracting by one is only for predefined values. When you work with custom values you don’t have to worry about that!

.element{
  @include breakpoint(between, small 1199px) {
    background-color: green;
  };
  @include breakpoint(between, 1200px 1400px) {
    background-color: blue;
  };
}

//CSS Output
@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 try to define a range without passing the “between” option. Simply pass two values and seperate them by comma.

The values either can be custom numbers (with a unit) or predefined values.

.element{
  @include breakpoint(320px, 768px) {
    background-color: teal;
  };
}

//CSS Output
@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;
  };
}

//CSS Output
@media (min-width: 576px) and (max-width: 991px) {
  .element {
    background-color: teal;
  }
}