Function to change variables in CSS file?

Question

Is there a function that will take a custom CSS file and change the variables fheight and fwidth to the output from screen.height and screen.width, respectively? I am trying to build a js reveal presentation using percentages to position elements, and I understand that the properties height, top, and bottom will only accept percentages as values if the dimensions of a parent element are specified. I cannot specify the dimensions of the slide using anything other than the Javascript functions screen.height and screen.width because I want the presentation to work on displays of any size. Is there an R, Javascript, or other language function that will take a custom CSS file with the variables fheight and fwidth as input, and return a CSS file with those variables replaced by pixel values?

I want my CSS file to look like:

html, body{
    height: fheight;
    width: fwidth;
}

After the html and body elements' height and width are set to the dimensions of the display, I think that the percentages to specify height and position will work.

I'm not entirely sure what you want to achieve but it sounds like you could use the jQuery CSS method to change the relevant CSS values depending on the input. http://api.jquery.com/css/ — Neil K, Jul 21 '16 at 20:06

score 2 · Accepted Answer · edited May 23 '17 at 11:44

What you are looking for is possible with SASS: http://sass-lang.com/

However, normal CSS does allow variables in the way you described. If SASS is not an option, use Neil's suggestion and change them using jQuery's css function (or if you prefer native js style attribute)

jQuery: $("body").css({'height': '55px', 'width': '99px';}); Read More: http://api.jquery.com/css/

Vanilla JS: document.body.style.width= fwidth; Read More: Set CSS property in Javascript? OR http://www.w3schools.com/js/js_htmldom_css.asp

Hope those get you started and Good Luck.

Function to change variables in CSS file?

1 Answers1