Wiki Article · Cinematic

Sass (Syntactically Awesome Style Sheets)

Sass (Syntactically Awesome Style Sheets) duniya ka sabse popular CSS preprocessor hai jo plain CSS…

Overview

Sass (Syntactically Awesome Style Sheets) — Quick Facts

📌

Property: Detail

🎯

Full Name: Syntactically Awesome Style Sheets…

⚡

Type: CSS Preprocessor

🔑

Original Author: Hampton Catlin

Topic 1

Infobox

📚 | Property | Detail |…

Topic 2

History aur Evolution

💡 Sass ka journey 2006 se shuru hota hai aur CSS ecosystem ka ek foundational part ban gaya…

Topic 3

Core Concept — CSS Preprocessor Kya Hai

💡

Variables: CSS custom properties…

🔑

Nesting: CSS me har selector fully…

⚡

Code reuse: Mixins, functions,…

🎯

File organization: Multiple files…

Topic 4

Sass vs SCSS Syntax

⭐ Sass ke 2 syntaxes hain. Aaj majority SCSS use karte hain, lekin dono valid hain: |…

Topic 5

Core Features

🔑 Sass ki power in features me hai jo plain CSS me available nahi hain (ya limited hain): |…

Topic 6

Sass Compilation Flow

💡

Expanded (default):…

🔑

Compressed: Minified CSS output…

Topic 7

Sass Implementations

Topic 8

Sass vs Other CSS Preprocessors

Topic 9

Sass in Modern Workflow

💡

Bootstrap 4/5: Internally Sass use…

🔑

Foundation: Zurb Foundation bhi…

⚡

Bulma: Pure Sass framework

🎯

Material UI (older): Sass-based…

Topic 10

Advantages aur Limitations

💡 | Advantages | Limitations |…

Topic 11

Best Practices

🎯 | Practice | Reason |…

Topic 12

Real-World Usage

💡

Brand colors override karne ke…

🔑

Unwanted components remove karne…

⚡

Custom mixins (grid, breakpoints,…

🎯

Design tokens Sass variables me…

Topic 13

Mermaid Diagrams

🔑 Diagram 1 — Sass Compilation Pipeline `mermaid flowchart LR A["Developer writes<br/>.scss…

Topic 14

Glossary

✨ | Term | Meaning |…

Comparison

Sass vs SCSS Syntax

⚖️

File Extension: .sass

⚖️

Braces {}: Nahi — indentation-based

⚖️

Semicolons ;: Nahi — newline se…

Comparison

Sass vs Other CSS Preprocessors

⚖️

Type: CSS Preprocessor

⚖️

Syntax: SCSS (CSS-superset)

⚖️

Variables: $var

Diagram

Visual Flow

📊 Diagram visualization — details in narration

Diagram

Visual Flow

📊 Diagram visualization — details in narration

Quiz — Question 1

Sass (Syntactically Awesome Style Sheets) ka sabse sahi definition kya hai?

Quick Quiz

Quiz — Question 2

Sass (Syntactically Awesome Style Sheets) ka 'Full Name' kya hai?

Complete! 🎉

Sass (Syntactically Awesome Style Sheets) Complete!

Aliens Wiki · HIEN · Cinematic Knowledge

✅