Pixels to rem


#1

Hello. I’m interested in using ionic. Is there a way to modify the CSS to use rems instead of pixels?

Thanks

Tom


#2

That would require manually changing the values.
you could make a function that will convert the px value to REM. here is an example of a function:

@function my-calculation-function($some-number, $another-number){
  @return $some-number + $another-number
}

You can then use it in your code as follows:

.my-module {
  padding: my-calculation-function(10px, 5px);
}

Here is an article on the subject:
http://thesassway.com/advanced/pure-sass-functions


#3

Thank you for the reply. Are having pixels as values for font size, padding, etc. an issue for mobile apps?

THanks

Tom


#4

Will ionic make their SASS implementation to be more user friendly for adding capability for using rems in the future? It doesn’t seem very practical for me to go through every single SCSS file and modify the calculations to accommodate rems. It would be better if ionic framework had this capability already where I can modify a function. Have the function return px as the default.