Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, near to HTML and JavaScript.
There are many CSS preprocessors to choose from, however, most CSS preprocessors will add some features that don’t exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on. These features make the CSS structure more readable and easier to maintain.
Here are a few of the most popular CSS preprocessors:
What is SASS?
SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor, which helps to reduce repetition with CSS and saves time. It is a more stable and powerful CSS extension language that describes the style of a document cleanly and structurally.
Use:
Features:
Example:
Sass has two syntaxes. The .sass file extension uses the older syntax that is indentation-based and omits semicolons and curly brackets from the code. The newer and more widely used syntax belonging to the .scss file extension. It uses the standard CSS syntax with braces and semicolons.
Below, you can see a basic example of the Sass/SCSS syntax. The code simply declares two variables, $primary-color, and $primary-bg and applies them to the body HTML element.
Syntax 1
/* SCSS */
$primary-color: seashell;
$primary-bg: darkslategrey;
body {
color: $primary-color;
background: $primary-bg;
}
Syntax 2
/* Sass */
$primary-color: seashell
$primary-bg: darkslategrey
body
color: $primary-color
background: $primary-bg
What is LESS?
LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for a website. LESS is a dynamic style sheet language that extends the capability of CSS. LESS is also cross-browser friendly.
Use:
Features:
Example:
LESS uses the standard CSS syntax with the .less file extension. This implies a substantial .css document is a legitimate .less record too. In this way, it’s extremely simple to get the syntax in the event that you definitely know CSS, regardless of whether LESS has a couple of additional components that you won’t discover in CSS, for example, the @ sign for factors.
Syntax
/* LESS */
@primary-color: seashell;
@primary-bg: darkslategrey;
body {
color: @primary-color;
background: @primary-bg;
}
What is STYLUS?
The first version of Stylus was launched one year after LESS, in 2010 by TJ Holowaychuk, a former Node.js developer. The stylus is written in Node.js so that developers can easily integrate it into their Node projects. It was influenced by both Sass and LESS.
Features:
Example:
Stylus uses the .styl file extension and it allows us to write code in many different ways. We can use the standard CSS syntax, but we can also omit brackets, colons, and/or semicolons or leave out all punctuation altogether.
Syntax 1
/* Stylus standard CSS syntax */
primary-color = seashell;
primary-bg = darkslategrey;
body {
color: primary-color;
background: primary-bg;
}
We can remove all punctuation (brackets, semicolons, colons)
Syntax 2
/* Stylus syntax without punctuation */
primary-color = seashell
primary-bg = darkslategrey
body
color primary-color
background primary-bg
Conclusion:
All the three CSS pre-processors clarified here pretty much have comparable highlights. They all follow the DRY standard and can perform conditional statements, functions, and operations. Simply pick one as per your coding recognition and start utilizing it in your next project.