I'm using grid from csswizardry and wanting to create breakpoints as variables... If defined as standard "strings":
$breakpoints: (
'palm' '(max-width: 480px)'
)!default;
But when I change it to:
$palmmaxwidth: 480px;
$breakpoints: (
'palm' '(max-width: $palmmaxwidth)'
)!default;
it will not compile correctly within the mixin:
@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 only screen and #{$declaration}{
@content;
}
}
}
@if $breakpoint-found == false{
@warn "Breakpoint ‘#{$media-query}’ does not exist"
}
}
The error is Invalid CSS after "...nd (max-width: ": expected expression (eg 1px, bold), was "$palmmaxwidth)"
What am I missing?
The solution is quite simple after trying every possible combination:
$breakpoints: (
'palm' '(max-width: '+$palmmaxwidth+')'
)!default;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.