Issue
I'd like to use the same variable for different media queries. Something like this:
$avatar_size: 200px;
@media (#{$tablet_size}) {
$avatar_size: 150px;
}
@media (#{$mobile_size}) {
$avatar_size: 100px;
}
The objective is to be able to use this variable in multiple places, so I can just reference the variable and not have to throw in the media queries every time. Like so:
.font-awesome-icon {
font-size: $avatar_size;
}
img {
width: $avatar_size;
height: $avatar_size;
}
.img-wrapper {
height: $avatar_size;
}
Any way to do this?
Solution
This is impossible, variables are assigned values when the Sass is compiled to CSS.
what you can do is this:
$avatar_size: 200px;
$avatar_tablet: 150px;
$avatar_mobile: 100px;
@media (#{$tablet_size}) {
img {
width: $avatar_tablet;
height: $avatar_tablet;
}
}
@media (#{$mobile_size}) {
img {
width: $avatar_mobile;
height: $avatar_mobile;
}
}
Answered By - Nir Ben-Yair
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.