Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<div class="wrapper" >
Hello
</div>
// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----
$breakpoints: (
small: "(max-width : 768px)",
medium: "(min-width : 768px) and (max-width : 1024px)"
);
$breakpoint__smallest: "(max-width: 320px)";
$breakpoint__small: "";
$breakpoint__medium: "(min-width : 768px) and (max-width : 1024px)";
/// Mixin to manage responsive breakpoints
/// @author Hugo Giraudel
/// @param {String} $breakpoint - Breakpoint name
/// @require $breakpoints
@mixin respond-to($breakpoint) {
// If the key exists in the map
@if map-has-key($breakpoints, $breakpoint) {
// Prints a media query based on the value
@media #{map-get($breakpoints, $breakpoint)} {
@content;
}
}
// If the key doesn't exist in the map
@else {
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+ "Available breakpoints are: #{map-keys($breakpoints)}.";
}
}
$bp-length: length($breakpoints);
@for $i from 1 through $bp-length {
$bp: nth($breakpoints, $i);
@include respond-to(nth($bp, 1)) {
$bp-name: nth($bp, 1);
content: '#{$bp-name}';
}
}
.wrapper {
color: yellow;
@include respond-to('small') {
color: red;
@include respond-to('medium') {
color: blue;
}
}
}
@media (max-width: 768px) {
content: "small";
}
@media (min-width: 768px) and (max-width: 1024px) {
content: "medium";
}
.wrapper {
color: yellow;
}
@media (max-width: 768px) {
.wrapper {
color: red;
}
}
@media (max-width: 768px) and (min-width: 768px) and (max-width: 1024px) {
.wrapper {
color: blue;
}
}
<div class="wrapper" >
Hello
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.