CSS preprocessors are scripting languages that extend the capabilities of regular CSS. These preprocessors allow for more efficient and maintainable styles, with features such as variables, mixins, nesting, and more. Let's explore the fundamentals of popular CSS preprocessors like SASS/SCSS, LESS, and Stylus.
CSS preprocessors enhance CSS with additional functionality. They allow developers to write more efficient and organized code using variables, mixins, nesting, and more. After writing in a preprocessor language, it needs to be compiled into standard CSS that browsers can interpret.
SASS and SCSS are the most popular CSS preprocessors. SCSS is an extension of CSS and includes additional features. SASS has a more compact syntax, but SCSS is widely used due to its similarity to CSS.
// Variables
$primary-color: #3498db;
$font-size: 16px;
// Nesting
nav {
ul {
list-style-type: none;
}
li {
display: inline;
margin: 0 10px;
}
a {
text-decoration: none;
color: $primary-color;
}
}
// Mixins
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
// Using Mixin
button {
@include border-radius(5px);
background-color: $primary-color;
color: white;
}
nav ul {
list-style-type: none;
}
nav li {
display: inline;
margin: 0 10px;
}
nav a {
text-decoration: none;
color: #3498db;
}
button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #3498db;
color: white;
}
LESS is another CSS preprocessor with similar features. It allows variables, mixins, and nesting just like SASS/SCSS, but with a slightly different syntax.
// Variables
@primary-color: #3498db;
@font-size: 16px;
// Nesting
nav {
ul {
list-style-type: none;
}
li {
display: inline;
margin: 0 10px;
}
a {
text-decoration: none;
color: @primary-color;
}
}
// Mixins
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
// Using Mixin
button {
.border-radius(5px);
background-color: @primary-color;
color: white;
}
nav ul {
list-style-type: none;
}
nav li {
display: inline;
margin: 0 10px;
}
nav a {
text-decoration: none;
color: #3498db;
}
button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #3498db;
color: white;
}
Stylus is a more flexible preprocessor, allowing developers to omit semicolons, curly braces, and parentheses. It's very dynamic and gives developers more control over the syntax.
// Variables
primary-color = #3498db
font-size = 16px
// Nesting
nav
ul
list-style-type none
li
display inline
margin 0 10px
a
text-decoration none
color primary-color
// Mixins
border-radius(radius)
-webkit-border-radius radius
-moz-border-radius radius
border-radius radius
// Using Mixin
button
border-radius(5px)
background-color primary-color
color white
nav ul {
list-style-type: none;
}
nav li {
display: inline;
margin: 0 10px;
}
nav a {
text-decoration: none;
color: #3498db;
}
button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #3498db;
color: white;
}
CSS preprocessors require compilation before they can be used in the browser. Tools like Gulp, Webpack, or Node-sass are often used for automatic compilation. This allows you to write preprocessor code and then automatically generate the standard CSS files.
Variables allow you to store values such as colors, font sizes, or measurements that can be reused throughout your stylesheets.
// Variables
$primary-color: #3498db;
$font-size: 16px;
body {
color: $primary-color;
font-size: $font-size;
}
body {
color: #3498db;
font-size: 16px;
}
Nesting allows you to write your CSS in a hierarchical way, mirroring the structure of your HTML.
// Nesting
nav {
ul {
list-style-type: none;
}
li {
display: inline;
margin: 0 10px;
}
a {
text-decoration: none;
color: $primary-color;
}
}
nav ul {
list-style-type: none;
}
nav li {
display: inline;
margin: 0 10px;
}
nav a {
text-decoration: none;
color: #3498db;
}
Mixins allow you to create reusable pieces of code that can be included in other selectors.
// Mixins
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
button {
@include border-radius(5px);
background-color: $primary-color;
color: white;
}
button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #3498db;
color: white;
}
Inheritance allows you to extend existing styles and apply them to other selectors.
// Inheritance
.button {
background-color: $primary-color;
color: white;
padding: 10px 20px;
border-radius: 5px;
}
.primary-button {
@extend .button;
background-color: green;
}
.button {
background-color: #3498db;
color: white;
padding: 10px 20px;
border-radius: 5px;
}
.primary-button {
background-color: green;
color: white;
padding: 10px 20px;
border-radius: 5px;
}