Use SCSS Variables for Layout ($height_footer, etc)


Hi, I just discovered Ionic a few days ago and so far absolutely love it, thanks to the team for the awesome work!

Some background info: I am currently building an App with angular and similar elements as Ionic’s. I am considering using Ionic as a base instead of my similar organized but not as well optimized code.

The one thing I have done differently is to set global Layout Variables for font-sizes, height’s/width’s of elements, etc which makes it very easy to customize depending upon intended platform or layout preferences.


Instead of writing in the _button-bar.scss

line-height: 44px;

I would write something like this in the _button-bar.scss

line-height: $buttonbar_lineheight;

And then have a _layout.scss which contains something like this:

$ioslineheight1: 44px;
$buttonbar_lineheight: $ioslineheight1;

I am aware that I can easily overwrite the Ionic constants, but would prefer to have a separate file for the layout variables. Would the Ionic team or any other users be interested in supporting or using this feature?
If not I’ll just try to implement it for myself.