Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----
/**
* Testing:
* - prepending optional selectors
* - css-wizardry-grids with all MQ
*/
$var: '';
@if false {
$var: "html,"
}
#{$var} body { debug: "true"; }
$empty: '';
$breakpoints: (
'palm' 'screen and (max-width: 480px)',
'lap-and-up' 'screen and (min-width: 481px)',
'lap' 'screen and (min-width: 481px) and (max-width: 1023px)',
'portrait' 'screen and (max-width: 768px)',
'landscape' 'screen and (min-width: 769px)',
'portable' 'screen and (max-width: 1023px)',
'desk' 'screen and (min-width: 1024px)',
'desk-wide' 'screen and (min-width: 1400px)',
'all' 'all'
);
@mixin grid-media-query($media-query){
$breakpoint-found: false;
@each $breakpoint in $breakpoints{
$name: nth($breakpoint, 1);
$declaration: nth($breakpoint, 2);
@if $media-query == $name and $declaration{
$breakpoint-found: true;
@media #{$declaration}{
@content;
}
}
}
@if $breakpoint-found == false{
//*Warning: Breakpoint ‘#{$media-query}’ does not exist */
@warn "Breakpoint ‘#{$media-query}’ does not exist"
}
}
$label-breakpoints:
( 'palm' 'lap-and-up' 'labels-beside--palm'
, 'portrait' 'landscape' 'labels-beside'
, 'all' null 'lb'
)!default;
@each $breakpoint in $label-breakpoints{
$bp-narrow: nth($breakpoint, 1);
$bp-wide: nth($breakpoint, 2);
$c: nth($breakpoint, 3);
@debug "#{classname} between #{bp-narrow} and #{bp-wide}";
/*Breakpoint: [#{$c}] [#{$bp-narrow}] [#{$bp-wide}] */
.#{$c} {
@include grid-media-query($bp-narrow) {
labels: above;
}
@include grid-media-query($bp-wide) {
labels:beside;
}
}
}
/**
* Testing:
* - prepending optional selectors
* - css-wizardry-grids with all MQ
*/
body {
debug: "true";
}
/*Breakpoint: [labels-beside--palm] [palm] [lap-and-up] */
@media screen and (max-width: 480px) {
.labels-beside--palm {
labels: above;
}
}
@media screen and (min-width: 481px) {
.labels-beside--palm {
labels: beside;
}
}
/*Breakpoint: [labels-beside] [portrait] [landscape] */
@media screen and (max-width: 768px) {
.labels-beside {
labels: above;
}
}
@media screen and (min-width: 769px) {
.labels-beside {
labels: beside;
}
}
/*Breakpoint: [lb] [all] [] */
@media all {
.lb {
labels: above;
}
}
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.