Live LESS Compilation

Developer
Derek Wheelden
Size
3,251 Kb
Views
32,384
  1. Live LESS Compilation Previews
  2. Live LESS Compilation HTML Codes
  3. Live LESS Compilation CSS Codes
  4. Live LESS Compilation JS Codes

How do I make an live less compilation?

Compile LESS as it's typed on the page.. What is a live less compilation? How do you make a live less compilation? This script and codes were developed by Derek Wheelden on 10 August 2022, Wednesday.

Live LESS Compilation Previews
IQ Test

Live LESS Compilation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Live LESS Compilation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://fonts.googleapis.com/css?family=Lato:300,700|Oswald);
textarea { display: block; width: 100%; height: 16em; margin: 1em auto; padding: 1em; border: none;
}
/** PAGE STYLES **/
html, body { width: 100%; height: 100%;
}
html { font-size: 62.5%;
}
body { font-family: 'Lato', sans-serif; font-size: 2em; line-height: 1.5; color: white;
}
.container { width: 45em; margin: 0 auto;
}
h1 { margin: 0; font-family: 'Oswald'; text-transform: uppercase; text-align: center;
}
p { margin: 0; text-align: center;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <h1>Live LESS Compiling</h1> <p>Just go ahead and type right in there</p> <textarea>
// Variables
@background: hsl(10, 70%, 10%);
@editor-font: consolas, monospace;
// Styles
body { background: lighten(@background, 20%);
}
textarea { font-family: @editor-font; font-size: 0.7em;
} </textarea>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/less.js/1.5.1/less.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Live LESS Compilation - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Lato:300,700|Oswald);
textarea { display: block; width: 100%; height: 16em; margin: 1em auto; padding: 1em; border: none;
}
/** PAGE STYLES **/
html, body { width: 100%; height: 100%;
}
html { font-size: 62.5%;
}
body { font-family: 'Lato', sans-serif; font-size: 2em; line-height: 1.5; color: white;
}
.container { width: 45em; margin: 0 auto;
}
h1 { margin: 0; font-family: 'Oswald'; text-transform: uppercase; text-align: center;
}
p { margin: 0; text-align: center;
}

Live LESS Compilation - Script Codes JS Codes

var lessOutput, lessRaw, appendStyle = $('<style />', { id : 'less' }).appendTo('head'), parser = new(less.Parser)(), CssCompile = { typingTimer: null, doneTypingInterval: 500, $style: $('head style#less'), init: function() { var _this = CssCompile; lessRaw = $('textarea').val(); if (lessRaw) _this.compile(lessRaw); }, compile: function(raw) { var _this = CssCompile; parser.parse(raw, function(err, css){ if (err) { lessOutput = err; // Do some error handling } if (css) { lessOutput = css.toCSS({ compress: true }); _this.$style.text(lessOutput); } }); } };
CssCompile.init();
$('textarea').keyup(function () { clearTimeout(CssCompile.typingTimer); CssCompile.typingTimer = setTimeout(CssCompile.init, CssCompile.doneTypingInterval);
});
Live LESS Compilation - Script Codes
Live LESS Compilation - Script Codes
Home Page Home
Developer Derek Wheelden
Username frxnz
Uploaded August 10, 2022
Rating 3.5
Size 3,251 Kb
Views 32,384
Do you need developer help for Live LESS Compilation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Derek Wheelden (frxnz) Script Codes
Name
Sliding Tab Box Things
User Listing
Fantastic Mr. Fox
Music Player
Fluid Image Management
Triangle Peeker
Folding Panels
Blockquote Patterns
Tile Animation Thing
Pulsing Notification
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!