SCSS Learning Repository 🎨

A comprehensive collection of SCSS examples and tutorials to help you master CSS preprocessing with Sass.

📚 Learning Path

1. Basics (/basics/)

• Variables and data types
• Nesting and selectors
• Comments and documentation
• Import and partial files

2. Mixins & Functions (/mixins-functions/)

• Creating reusable mixins
• Built-in functions
• Custom functions
• Parameter handling

3. Advanced Features (/advanced/)

• Extend and inheritance
• Placeholder selectors
• Control directives (@if, @for, @each, @while)
• Maps and lists

4. Real Projects (/projects/)

• Component library
• Responsive design system
• Animation framework
• Utility classes

🚀 Getting Started

1. Install Sass: npm install -g sass
2. Compile SCSS: sass input.scss output.css
3. Watch for changes: sass --watch input.scss:output.css

📁 Project Structure

SCSS/
├── basics/           # Fundamental SCSS concepts
├── mixins-functions/ # Reusable code patterns
├── advanced/         # Advanced SCSS features
├── projects/         # Complete project examples
├── assets/           # Images and resources

🎯 Learning Objectives

• ✅ Understand SCSS syntax and compilation
• ✅ Master variables, nesting, and mixins
• ✅ Create maintainable and scalable stylesheets
• ✅ Build component-based CSS architecture
• ✅ Implement responsive design patterns
• ✅ Optimize CSS output and performance

📖 Resources

• Sass Official Documentation
• Sass Guidelines
• CSS-Tricks Sass Guide

🤝 Contributing

Feel free to add more examples or improve existing ones. This is a learning resource for everyone!

---

Happy Styling!