Skip to content

Instantly share code, notes, and snippets.

@jensgro

jensgro/SassMeister-input-HTML.html

Created July 15, 2014 05:54
Show Gist options
  • Save jensgro/72a87787200749f0aca6 to your computer and use it in GitHub Desktop.
Save jensgro/72a87787200749f0aca6 to your computer and use it in GitHub Desktop.
Download ZIP
Media-Queries via Sass
Raw
SassMeister-input-HTML.html
<body>
this is a test
</body>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.0.rc.1)
// Compass (v1.0.0.alpha.20)
// ----
// ------------------------------------------------------- //
// Mediaqueries ------------------------------------------ //
// ------------------------------------------------------- //
// named MQs based off http://css-tricks.com/media-queries-sass-3-2-and-codekit/ &
// Define your breakpoint sizes
// mine are based on min-width MQ's
// e.g. tiny is 0-499px
$tiny: 0;
$small: 500px;
$medium: 1000px;
$large: 1300px;
// Breakpoint mixin
@mixin breakpoint($media) {
// if the media is 'tiny'
@if $media == tiny {
// define mediaquery with variable
@media only screen and (min-width: $tiny) {
// print content CSS
@content;
}
}
@else if $media == small {
// small and medium are 1px smaller than their previous variable
@media only screen and (min-width: $small - 1) {
@content;
}
}
@else if $media == medium {
@media only screen and (min-width: $medium - 1) {
@content;
}
}
@else if $media == large {
@media only screen and (min-width: $large) {
@content;
}
}
}
// Media Query Test
// include on the body or main container element
// prints the media query with a 30px top colored border
// and a :before element that prints the pixel range applicable
@mixin test {
@include breakpoint(tiny) {
// create a top border that
border-top: 30px solid blue;
&:before {
// this variable sets the max of the range, e.g. 0 - 500px
$tiny-defined: $small - 1;
content: "#{$tiny}px to #{$tiny-defined}";
color: #fff;
position: absolute;
top: 5px;
left: 5px;
}
}
@include breakpoint(small) {
border-top: 30px solid purple;
&:before {
$small-defined: $medium - 1;
content: "#{$small} to #{$small-defined}";
color: #fff;
position: absolute;
top: 5px;
left: 5px;
}
}
@include breakpoint(medium) {
border-top: 30px solid red;
&:before {
$medium-defined: $large - 1;
content: "#{$medium} to #{$medium-defined}";
color: #fff;
position: absolute;
top: 5px;
left: 5px;
}
}
@include breakpoint(large) {
border-top: 30px solid orange;
&:before {
content: "#{$large} to max";
color: #fff;
position: absolute;
top: 5px;
left: 5px;
}
}
}
// Example
body {
@include test;
margin: 0;
}
Raw
SassMeister-output.css
body {
margin: 0;
}
@media only screen and (min-width: 0) {
body {
border-top: 30px solid blue;
}
body:before {
content: "0px to 499px";
color: #fff;
position: absolute;
top: 5px;
left: 5px;
}
}
@media only screen and (min-width: 499px) {
body {
border-top: 30px solid purple;
}
body:before {
content: "500px to 999px";
color: #fff;
position: absolute;
top: 5px;
left: 5px;
}
}
@media only screen and (min-width: 999px) {
body {
border-top: 30px solid red;
}
body:before {
content: "1000px to 1299px";
color: #fff;
position: absolute;
top: 5px;
left: 5px;
}
}
@media only screen and (min-width: 1300px) {
body {
border-top: 30px solid orange;
}
body:before {
content: "1300px to max";
color: #fff;
position: absolute;
top: 5px;
left: 5px;
}
}
Raw
SassMeister-rendered.html
<body>
this is a test
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment