I have a mixin inside another mixin and it doesn't work.
You can see the code below (5 last lines of input
).
Here are the PostCSS processors I use and in the order they are set:
- postcss-import
- postcss-mixins
- postcss-advanced-variables
- postcss-custom-properties
- postcss-custom-media
- postcss-nesting
- postcss-nested
- postcss-calc,
- pixrem,
- postcss-color-rgba-fallback,
- autoprefixer
/*------------------------------------*\
#SETTINGS
\*------------------------------------*/
/**
* Hold our breakpoint aliases and conditions in a list.
*/
@custom-media --palm screen and (max-width: 44.9375em);
@custom-media --lap screen and (min-width: 45em) and (max-width: 63.9375em);
@custom-media --lap-and-up screen and (min-width: 45em);
@custom-media --portable screen and (max-width: 63.9375em);
@custom-media --desk screen and (min-width: 64em);
@custom-media --retina (min-resolution: 192dpi), (min-resolution: 2dppx);
/**
* List all breackpoints
*
* This is used in mixins.
*/
$breackpoints: (palm, lap, lap-and-up, portable, desk, retina);
/*------------------------------------*\
#MIXINS
\*------------------------------------*/
/**
* Hide content depending of the viewport
*
* 1. Screen readers sometimes ignore display:none1. This means the content
* will be read despite being “hidden”. To hide content completely from
* screen readers use the following
* http://a11yproject.com/posts/how-to-hide-content/
*/
@define-mixin hidden {
display: none !important;
visibility: hidden !important; /* 1 */
}
/**
* Create classes for each breakpoints
*
* @mixin breakpoints-classes {
* .foo--$breakpoint {
* ...
* }
* }
*
* .foo--palm {...}
* .foo--lap {...}
* .foo--lap-and-up {...}
* ...
*/
@define-mixin breakpoints-classes {
@each $breakpoint in $breackpoints {
@media (--$breakpoint) {
@mixin-content;
}
}
}
/*------------------------------------*\
#RESPONSIVE-UTILITIES
\*------------------------------------*/
/**
* Hide content depending of the viewport
*
* 1. Screen readers sometimes ignore display:none1. This means the content
* will be read despite being “hidden”. To hide content completely from
* screen readers use the following
* http://a11yproject.com/posts/how-to-hide-content/
*/
@mixin breakpoints-classes {
.hidden--$breakpoint {
@mixin hidden;
}
}
@media screen and (max-width: 44.9375em) {
.hidden--palm {
@mixin hidden; <----- bad!
}
}
@media screen and (min-width: 45em) and (max-width: 63.9375em) {
.hidden--lap {
@mixin hidden;
}
}
@media screen and (min-width: 45em) {
.hidden--lap-and-up {
@mixin hidden;
}
}
@media screen and (max-width: 63.9375em) {
.hidden--portable {
@mixin hidden;
}
}
@media screen and (min-width: 64em) {
.hidden--desk {
@mixin hidden;
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
.hidden--retina {
@mixin hidden;
}
}
I think breakpoints case is not for mixin too. Mixin should be used in same file, not as application level framework. So you should think about some custom plugin for this case.