Skip to content

Instantly share code, notes, and snippets.

@jensgro
Created June 12, 2013 12:47
Show Gist options
  • Save jensgro/5764945 to your computer and use it in GitHub Desktop.
Save jensgro/5764945 to your computer and use it in GitHub Desktop.
// ----
// Sass (v3.2.14)
// Compass (v0.12.2)
// ----
$break-small: 320px;
$break-large: 1024px;
@mixin respond-to($media) {
@if $media == handhelds {
@media only screen and (max-width: $break-small) { @content; }
}
@else if $media == medium-screens {
@media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; }
}
@else if $media == wide-screens {
@media only screen and (min-width: $break-large) { @content; }
}
}
.profile-pic {
float: left;
width: 250px;
@include respond-to(handhelds) { width: 100% ;}
@include respond-to(medium-screens) { width: 125px; }
@include respond-to(wide-screens) { float: none; }
}
@include respond-to(handhelds) {
.test {color: red;}
}
@include respond-to(medium-screens) {
.test {color: blue;}
}
.profile-pic {
float: left;
width: 250px;
}
@media only screen and (max-width: 320px) {
.profile-pic {
width: 100%;
}
}
@media only screen and (min-width: 321px) and (max-width: 1023px) {
.profile-pic {
width: 125px;
}
}
@media only screen and (min-width: 1024px) {
.profile-pic {
float: none;
}
}
@media only screen and (max-width: 320px) {
.test {
color: red;
}
}
@media only screen and (min-width: 321px) and (max-width: 1023px) {
.test {
color: blue;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment