Skip to content

Instantly share code, notes, and snippets.

@gandhiShepard

gandhiShepard/SassMeister-input-HTML.html

Created November 30, 2014 20:53
Show Gist options
  • Save gandhiShepard/6f75e81431e7d2963c08 to your computer and use it in GitHub Desktop.
Save gandhiShepard/6f75e81431e7d2963c08 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
$breakpoints: (
min: "(max-width: 480px)",
sm: "(max-width: 600px)",
med: "(max-width: 960px)",
lg: "(max-width: 1024px)",
xl: "(max-width: 1200px)",
max: "(max-width: 1600px)",
iphone: 'only screen and (min-device-width: 320px) and (max-device-width: 568px)',
retina: "only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)",
print: "print"
);
@mixin breakpoint($name) {
@if not map-has-key($breakpoints, $name) {
@warn "Warning: #{$name} is not a valid breakpoint name.";
}
@else {
@media #{map-get($breakpoints, $name)} {
@content;
}
}
}
p {
font-size: 4em;
@include breakpoint(min) {
font-size: 1.2em;
}
}
Raw
SassMeister-output.css
p {
font-size: 4em;
}
@media (max-width: 480px) {
p {
font-size: 1.2em;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment