CODEWITHSUNDEEP
sass
jrock2004
jrock2004

Reputation: 3501

Responsive Sass Variables

So I have created a function to convert px's to em's. The default is to use the a variable $base-font-size. So what is the best practice to follow if I want to change that variable based on browser width? Is that possible? If I change the variable will all the places that call the function recalculate?

@function em($pixels, $context: $base-font-size) {
  @return ($pixels / $context) * 1em;
}

Or would I have to at every place that calls this function, re-call it? Thanks

Upvotes: 1

Views: 400

Answers (1)

Robert Wade
Robert Wade

Reputation: 5003

Personally I would never alter the base font size of the application but rather set values based off of it at specific device sizes using media queries.

As an example:

$base-font-size: 14px;

@function em($pixels, $context: $base-font-size) {
  @return ($pixels / $context) * 1em;
}

* {
  font-size: em(12px);
  @media (min-width: 300px) { 
      font-size: em(16px);
  }
  @media (min-width: 640px) { 
      font-size: em(14px);
  }
  @media (min-width: 980px) { 
      font-size: em(12px);
  }
}

Which would compile as something like:

* {
  font-size: 0.85714286em;
}
@media (min-width: 300px) {
  * {
    font-size: 1.14285714em;
  }
}
@media (min-width: 640px) {
  * {
    font-size: 1em;
  }
}
@media (min-width: 980px) {
  * {
    font-size: 1.14285714em;
  }
}

Obviously, tailor to your needs.

Upvotes: 1

Related Questions