How to define a variable with different values on different screen on CSS SASS

Question

I'd like to manage the heightens of image using a variable in saas, instead of using percentages, I'd like to define different values based on different

How can I do that in saas files ?

I did this, but I got error message saying

Invalid CSS after "only screen ": expected media query list, was "{ $ratio: 24px }" on line 10

Here is what I did:

// 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
    }
}

zhuzhik · Answer 1 · 2015-01-28T10:12:19.223

-1

This is not possible. The trigger @media only screen happens on the client-side. You could do it by hand smth like this:

@media only screen and (min-width: 64.063em){
      $ration: 24px; // you need to indent it to (re)set it just within this media-query
      // now you copy all the css rules/properties that contain or are relative to $ration e.g.
      #wrapper{
          width: $ration; //or your needed property
      }
 }

@media only screen and (min-width: 40.063em){
    $ration: 22px;
    #wrapper{
        width: $ration;
    }   
}

Example http://jsfiddle.net/h3604jsr/2/

edited Jan 28 '15 at 10:12

answered Jan 28 '15 at 08:51

zhuzhik

41
9

I don't why, but it's not working. – user3378649 Jan 28 '15 at 09:32
this sass syntax, try scss syntax for this: #wrapper{width: $ration} – zhuzhik Jan 28 '15 at 09:38
I edit code, try this – zhuzhik Jan 28 '15 at 09:45
I m using sass, it says that t 's invalid syntax – user3378649 Jan 28 '15 at 09:51
Hmm...strange...if you use sass, you should only drop square brackets and semicolons. This method work on scss fine. – zhuzhik Jan 28 '15 at 10:00
for example http://jsfiddle.net/h3604jsr/2/ – zhuzhik Jan 28 '15 at 10:08
I am thinking of writing a function, check UPDATE, but I coudln't find a way to get the width of screen as a value – user3378649 Jan 28 '15 at 10:09
Is my approach possible ? – user3378649 Jan 28 '15 at 10:12
You needed get the width of screen and use this as sass variable? – zhuzhik Jan 28 '15 at 10:17
Hm, i am afraid it is impossible. Sass file compile in css before user load page and screen width not yet known at this moment. – zhuzhik Jan 28 '15 at 10:21
But why you wont use media query? Check the sample jsfidde (resize window and div change color ) that I add, it works fine. – zhuzhik Jan 28 '15 at 10:27
If this method doesnt work for you, make an example on jsfiddle whith your html markup and I try to help. – zhuzhik Jan 28 '15 at 10:36

How to define a variable with different values on different screen on CSS SASS

1 Answers1