Consider the following SASS code. I want to make sure that if the screen is above 1250px
then the margin-top
should be 750px
and then it should change depending on size. However SASS does not allow me to update the variables inside the strings.
// Above 1250px
$pageTemplateMargin:750px;
// Below 1250px
@media screen and (max-width:1250px){
$pageTemplateMargin:550px;
}
// Below 950px
@media screen and (max-width:950px){
$pageTemplateMargin:450px;
}
@media screen and (max-width:850px){
$pageTemplateMargin:150px;
}
@media screen and (max-width:750px){
$pageTemplateMargin:250px;
}
// Render the correct code
.page-template {margin-top:$pageTemplateMargin}
Is there a better way for this, as it does not work and page-template
stays at 750px
.
Thanks
See Question&Answers more detail:os