Day 9: CSS Preprocessors – SASS/LESS Introduction

Day 9: CSS Preprocessors – Introduction to SASS/LESS

👋 Namaskaram! Innu nammude session-il CSS Preprocessors ne kurichu padikkan pokunnu. Ithu upayogichu modular, efficient & reusable CSS code ezhuthan kazhiyum.

🔹 1. CSS Preprocessors Enthu?

CSS Preprocessors ennu parayunnathu oru tool aanu, athu nammal normal CSS ezhuthunna reethiyil changes varuthi, aduthu oru powerful version aakkunnu. Main preprocessors:

🔥 SASS (Syntactically Awesome Style Sheets)
🔥 LESS (Leaner CSS)

Preprocessors upayogichu variables, nesting, mixins, functions, inheritance, etc. use cheyyam.

🔹 2. SASS – Easy & Powerful

SASS (Syntactically Awesome Style Sheets) is the most popular CSS preprocessor. SASS il nammal variables, nesting, mixins, functions, inheritance, etc. use cheythu clean aayi CSS ezhutham. Two syntaxes undu:

SCSS (Sassy CSS) – Similar to CSS, popular & easy to learn.
Indented Syntax – Shorter syntax but slightly different.

📌 Example – Using Variables & Nesting in SASS

$primary-color: #3498db;
$padding: 10px;

.box {
    background: $primary-color;
    padding: $padding;
    color: white;
    border-radius: 5px;
    h3 {
        text-align: center;
    }
}

🔹 3. LESS – Similar but Different

LESS um SASS pole thanne anu, but syntax kurachu vereyaanu. LESS il variables '@' symbol upayogichu define cheyyunnu.

📌 Example – Using Variables & Nesting in LESS

@primary-color: #e74c3c;
@padding: 15px;

.card {
    background: @primary-color;
    padding: @padding;
    color: white;
    border-radius: 10px;
    h3 {
        text-align: center;
    }
}

🔹 4. Benefits of Using Preprocessors

✅ Code Reusability – Variables, Mixins, and Functions
✅ Modularity – Nesting & Partials for organized code
✅ Maintainable & Organized Code – Easier to manage large projects
✅ Compatibility – Compiles to standard CSS

🎯 Conclusion

🔥 SASS – Powerful features with clean syntax
🔥 LESS – Similar to SASS but with different syntax
🔥 Benefits – Efficient, Reusable, and Maintainable CSS

📌 Next Session: Advanced SASS Features – Don't miss it!

Module 1 Session 9

🔒 Login Required