-1

I would like to know if I need to duplicate style inside my media queries whereas my variables have been redefined.

In this example, will my font-size to be set at 20px in my @media conditions ?

$normal-size: 30px;
p {
    font-size: $normal-size;
}

@media ... {
    $normal-size: 20px;
}

Or should I duplicate the p line like this?

$normal-size: 30px;
p {
    font-size: $normal-size;
}

@media ... {
    $normal-size: 20px;
    p {
        font-size: $normal-size;
    }
}
Volker E.
  • 5,911
  • 11
  • 47
  • 64
Luc
  • 163
  • 2
  • 6
  • possible duplicate of [Using Sass Variables with CSS3 Media Queries](http://stackoverflow.com/questions/9122195/using-sass-variables-with-css3-media-queries) – cimmanon Aug 22 '14 at 16:43
  • You know, this would have been very easy to answer yourself just by running the code. – cimmanon Aug 22 '14 at 22:24
  • Of course I could have compiled the code by myself but it was the opportunity to learn good practises. – Luc Aug 23 '14 at 17:52
  • SO isn't the place for opinionated "good practices" questions. You're supposed to show some effort and only ask when you're stuck trying to solve the problem on your own *first*. – cimmanon Aug 23 '14 at 18:01

1 Answers1

0

You have to do the second one. In your first example, your generated CSS would be:

p {
  font-size: 30px;
}

In your second example, your generate CSS would be:

p {
  font-size: 30px;
}

@media ... {
  p {
    font-size: 20px;
  }
}

I'd probably define 2 variables for the 2 different text sizes, like so:

$normal-font-size: 30px;
$tablet-font-size: 20px;

p {
  font-size: $normal-font-size;
}

@media ... {
  p {
    font-size: $tablet-font-size;
  }
}

You generally don't want to change the value of your Sass variables throughout your code like that. You'd have to make sure to reset it to 30px if you wanted to do something after the media block that needed it.

Tyler Marien
  • 752
  • 4
  • 11
  • Thank you! Actually since SAAS don't merge identical media queries when compiling, I used to put my media queries at the end of each file. And it would have been good not to rewrite code twice just because it's definitely my normal size on mobile. ;) – Luc Aug 23 '14 at 17:57