Skip to content

bstaley/cssvariableshim

Folders and files

NameName
Last commit message
Last commit date

Latest commit

d6af403 · Jun 6, 2017

History

10 Commits
Jun 6, 2017
Apr 24, 2014

Repository files navigation

The CSS Variable Shim

Allows you to write variables into your css.

Note: If you would like to suggest a new feature please put an enhancement here https://github.com/bstaley/cssvariableshim/issues/new

Very easy to use. All you need to do is define variables at the top of a css file like so.

CSS Variable Shim Variable

/*@MyFavColor:rgb(1,25,240)*/

Then use it later in your style sheet.

CSS Class

.fav-button{ background-color:rgb(0,0,0)/*@MyFavColor*/; }

please note in the snippet above 'rgb(0,0,0)' is used as a backup.

the only thing you have to write in script is below.

Script

setStyleFiles();

Man this is easy. Goal is not only to be easy but to make your application themeable. It is very simple using the following JavaScript to change a variable on the fly.

Script

swapAProperty({ selectorName: '@MyFavColor', property: 'rgb(20,170,20)' }, true);

embed that code into a clickable object and now your application has themeing ability.

take a look at https://cssvariableshim.azurewebsites.net and try it out there.