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-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.
This mixin has been applied to this page only, to show you how the Breakpointer Sass mixin works. You can see the result in the top right corner of your screen. Please, resize the width of your browser to see which breakpoint you're at.
Tip: This mixin works best with the predefined breakpoint values in the _map-for-breakpoints.scss file. OK, let me put it this way. If the breakpoint mixin is the knight, the breakpointer is its squire.
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";
}
}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";
}
}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";
}
}Important: This mixin is for development only, so don't forget to comment out or remove the code before you go to production.