//kudos to Justin Avery
$breakpoints: (
xs: 0,
s: 34.375em,
m: 45em,
l: 60em,
xl: 72em
);
body::after {
content: '#{inspect($breakpoints)}'; //output will be content: "(xs: 0, s: 34.375em, m: 45em, l: 60em, xl: 72em)"
display: none;
}
//https://www.lullabot.com/articles/importing-css-breakpoints-into-javascript
/**
* These values will not show up in content, but can be
* queried by JavaScript to know which breakpoint is active.
* Add or remove as many breakpoints as you like.
*/
body:before {
content: "smartphone";
display: none; /* Prevent from displaying. */
}
@media (min-width: 700px) {
body:before {
content: "tablet";
}
}
@media (min-width: 1100px) {
body:before {
content: "desktop";
}
}
Linking SASS breakpoints to JS via CSS, using sass's inspect function. Output will be content: "(xs: 0, s: 34.375em, m: 45em, l: 60em, xl: 72em)"
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.