Gerillass
v2.1.0Type: Mixin
@include breakpointer();
* You can call mixins with or without the gls- namespace (e.g. @include gls-breakpointer();).
The Breakpointer Sass mixin is a handy little tool that shows which breakpoint you are at, so you can write your styles for that specific screen size.
Arguments
| Name | Type | Description |
|---|---|---|
$selector | string | Helps you target one specific selector. By default it targets the ::before pseudo-element of the <body> tag. |
You can pass a declaration block to change its appearance cosmetically.
Examples
Call the mixin at the root level of your stylesheet without passing any arguments.
@include breakpointer;@media (min-width: 0) {
body::before {
content: "xsmall";
}
}
@media (min-width: 576px) {
body::before {
content: "small";
}
}
@media (min-width: 768px) {
body::before {
content: "medium";
}
}
@media (min-width: 992px) {
body::before {
content: "large";
}
}
@media (min-width: 1200px) {
body::before {
content: "xlarge";
}
}Result
You can pass a CSS declaration block to customize how it looks (as I did when I was developing the Gerillass site itself).
@include breakpointer {
position: fixed;
top: 0;
right: 0;
color: white;
padding: 5px 10px;
z-index: 10;
}body::before {
position: fixed;
top: 0;
right: 0;
color: white;
padding: 5px 10px;
z-index: 10;
}
@media (min-width: 0) {
body::before {
content: "xsmall";
}
}
@media (min-width: 576px) {
body::before {
content: "small";
}
}
@media (min-width: 768px) {
body::before {
content: "medium";
}
}
@media (min-width: 992px) {
body::before {
content: "large";
}
}
@media (min-width: 1200px) {
body::before {
content: "xlarge";
}
}Result
Well, good news! You can call the Breakpointer Sass mixin in a selector if you wish.
.element {
@include breakpointer();
}@media (min-width: 0) {
.element::before {
content: "xsmall";
}
}
@media (min-width: 576px) {
.element::before {
content: "small";
}
}
@media (min-width: 768px) {
.element::before {
content: "medium";
}
}
@media (min-width: 992px) {
.element::before {
content: "large";
}
}
@media (min-width: 1200px) {
.element::before {
content: "xlarge";
}
}