Linking SASS breakpoints to JS via CSS

//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.