CSS Preprocessors (SASS and LESS)

Chapter 16: CSS Preprocessors (SASS and LESS)

16.1 What are CSS Preprocessors?

CSS preprocessors like SASS and LESS extend CSS with features like variables, nesting, mixins, and functions, making it easier to write maintainable and scalable styles.

16.2 Features of SASS and LESS

• Variables: Define reusable values.
• Nesting: Write CSS rules inside other rules.
• Mixins: Reuse blocks of styles with parameters.
• Functions: Perform calculations and operations.

16.3 Example: SASS Basics

/* SASS */
$primary-color: #3498db;

.button {
    background-color: $primary-color;
    &:hover {
        background-color: darken($primary-color, 10%);
    }
}
            

Compiles to:

/* CSS */
.button {
    background-color: #3498db;
}
.button:hover {
    background-color: #2980b9;
}
            

16.4 Summary

In this chapter, you learned the basics of CSS preprocessors like SASS and LESS, including variables, nesting, and mixins. In the next chapter, we will explore responsive design principles.

Written by Mahedi Hasan Rafsun | WebLearner Pro