1

SCSS:

$thick : 3px;
$pad : 0.5em;
$extra : calc(#{$pad} * 1.2);
$color : #8DC73F;

.footer__links {
  a {
    color: #333;
    padding: $pad $extra;
    display: inline-block;
    border: $thick solid transparent;
    position: relative;
    cursor: pointer;
    letter-spacing: 0.07em;
    }
}

I want to change the value of $pad for different media queries.

For example: 

mobile --> $pad : 0.3em, tablet --> $pad : 0.5em
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Sushmit Sagar
  • 1,412
  • 2
  • 13
  • 27
  • Possible duplicate of [Using Sass Variables with CSS3 Media Queries](https://stackoverflow.com/questions/9122195/using-sass-variables-with-css3-media-queries) – Bhuwan Mar 22 '18 at 05:17

2 Answers2

0

I think that it will be better to create separate variables. For example :

$space-xs = 4px;
$space-s = 8px;
$space-m = 16px;
$space-l = 32px;
$space-xl = 64px;

I strongly recommend you to read this article: https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62

It helped me a lot.

Alfrex92
  • 6,278
  • 9
  • 31
  • 51
0
You can create separate variable or you can override your $pad into media query as well.
Example :

$pad:3px;
@media (min-width:320px){

  $pad:10px;

  .footer__links {
  a {
      color: #333;
    padding: $pad $extra;
    display: inline-block;
    border: $thick solid transparent;
    position: relative;
    cursor: pointer;
    letter-spacing: 0.07em;

}
} 
This give 10px padding to .footer__links a in min screen width 320px
Nandu Hulsure
  • 123
  • 1
  • 7