Is there a way to adjust the height of an image using variables in SASS? Instead of relying on percentages, I want to set different values based on various criteria.
How can I achieve this in my SASS files?
I attempted to do this but encountered an error message:
Invalid CSS after "only screen ": expected media query list, was "{ $ratio: 24px }" on line 10
Here is my code snippet:
// Small screens
@media only screen { $ration: 24px }
@media only screen and (max-width: 40em) { $ration: 14px }
// Medium screens
@media only screen and (min-width: 40.063em) { $ration: 22px }
@media only screen and (min-width: 40.063em) and (max-width: 64em) {$ration: 4px }
// Large screens
@media only screen and (min-width: 64.063em) {$ration: 24px }
@media only screen and (min-width: 64.063em) and (max-width: 90em) {$ration: 24px }
// XLarge screens
@media only screen and (min-width: 90.063em) { $ration: 24px }
@media only screen and (min-width: 90.063em) and (max-width: 120em) { $ration: 24px }
// XXLarge screens
@media only screen and (min-width: 120.063em) { $ration: 24px }
UPDATE
//mobile: 320px,
//tablet: 740px,
//desktop: 980px,
//wide: 1300px
@function test() {
@if ($HOW_TO_Get_WIDTH == 320px ) {
return 22px;
} @else if ($HOW_TO_Get_WIDTH == 740px) {
@return 24px
}
}