Welcome to this new series based on JavaScript. This series will walk you through the various frameworks of JS. You will become familiar with JavaScript frameworks through which you can develop Client-side, Server-side, mobile and desktop applications. Before we start, we assume here that you must have at least beginner experience and knowledge of HTML, CSS, and JavaScript. Additional knowledge of Back-end technologies is a plus however it is not necessary.

HTML5

The HTML5 is the current version of HTML (the main markup language) used to structure the very basis of your website. This was released in Oct 2014. The current version has major developments in its structure, new tags like <article>, <header>, <footer>, etc., were introduced. Other than this the Document Object Model and the APIs like Canvas, Editable, and Drag-drop are now a fundamental part HTML.

We all use CSS to give life to our HTML structure. CSS3 is the current version and is already providing us with many things like various designing options, dynamicity, animation, etc. but here we’d talk about the CSS Preprocessors.

CSS Preprocessors

CSS is primitive. We tell it to do something and it simply does it. We cannot develop logics or make the code do much of the work like in programming languages, therefore we can use CSS preprocessors like SASS and LESS. These preprocessors give the developer to power their CSS for large or complex systems by providing the options such as variables, operators, mixing, functions, interpolations, nesting, Conditions, Loops… Man, it offers everything!

SASS and LESS

SASS, short for Syntactically Awesome Style Sheet, it is influenced by HAML and YAML while LESS is influenced by SASS. It is a scripting language which is compiled into SASS. The Sass is saved as a .sass file or .scss while LESS is saved as a .less file. Less was initially written in Ruby but was later replaced by JavaScript.

SASS uses indentations to separate code blocks and to separate rules it uses newlines. Let’s check some syntax of both these languages and compare both of them. SASS uses ‘$’ sign to start its variables while LESS uses ‘@’ character.  Here’s an example:

SASS code:

LESS code:

So we saw what HTML5 offers and got familiar with CSS Preprocessors. There’s a lot more to come in this series, keep checking for more, meanwhile surf the internet and get practice SASS and LESS.