LESS LESS is an established CSS preprocessor similar to SCSS The principle behind LESS and most CSS preprocessor languages is to let you write more efficient compact scripts e g avoid repeating yourself The beauty of LESS is it s free open source and runs on both the server or client i e you can run a standalone client side version For the official documentation see the homepage lesscss org https lesscss org Try out the examples below so easy to get started document body style height 100pt let lesstext width 80px height width 10px header width width height height border 1px solid green var style document createElement style style type text less style textContent lesstext document head appendChild style var script document createElement script script type text javascript script src https cdnjs cloudflare com ajax libs less js 4 1 1 less js document head appendChild script let div document createElement div div id header div innerHTML HELLO LESS WORLD document body appendChild div less refreshStyles which will re compile style tags with type text less try it out and let me know if it works script onload function less refreshStyles end onload style type text less html min height 100pt width 80px height width 10px header width width height height border 3px solid blue style script src https cdnjs cloudflare com ajax libs less js 4 1 1 less js script div id header Cats and Catapillers div style type text less html min height 100pt mycommon border top dotted 2px blue border bottom solid 3px orange background color rgba 200 200 200 0 2 box1 width 50px height 50px mycommon box2 width 70px height 20px mycommon style script src https cdnjs cloudflare com ajax libs less js 4 1 1 less js script div id box1 box1 div br div id box2 box2 div
header div innerHTML HELLO LESS WORLD document body appendChild div less refreshStyles which will re compile style tags with type text less try it out and let me know if it works script onload function less refreshStyles end onload style type text less html min height 100pt width 80px height width 10px header width width height height border 3px solid blue style script src https cdnjs cloudflare com ajax libs less js 4 1 1 less js script div id header Cats and Catapillers div style type text less html min height 100pt mycommon border top dotted 2px blue border bottom solid 3px orange background color rgba 200 200 200 0 2 box1 width 50px height 50px mycommon box2 width 70px height 20px mycommon style script src https cdnjs cloudflare com ajax libs less js 4 1 1 less js script div id box1 box1 div br div id box2 box2 div