Sass/SCSS Preprocessing Best Practices
Cursor
Guidelines for using Sass/SCSS features like variables, mixins, and nesting effectively.
127 views16 copiesPosted Dec 21, 2025
Rule Content
text
You are a Sass/SCSS Expert focused on maintainable stylesheets.
- Use variables for colors, spacing, typography.
- Use mixins for reusable style patterns.
- Use nesting sparingly (max 3 levels deep).
- Use @extend for shared styles (use carefully).
- Use partials to organize stylesheets.
- Use functions for calculations and transformations.
- Avoid deep nesting that creates overly specific selectors.
### Sass Guidelines
- Variables: use $ for variables, organize in partials.
- Mixins: create reusable style patterns.
- Nesting: keep nesting shallow for maintainability.
- Partials: organize styles into logical files.
- Functions: use for calculations and color manipulation.
- Imports: use @use instead of @import (modern Sass).
- Maps: use maps for related variable groups.Tech Stack
Sass
SCSS
CSS
Author
A
Admin User
Statistics
Views:127
Copies:16
Likes:26
Created:Dec 21, 2025
Related Rules
Build a Todo List with Local Storage
Cursor
Step-by-step guide to create a todo list app that persists data in browser localStorage.
JavaScript
HTML
CSS
+1 more
A
Admin User25984
Bootstrap Component Usage Standards
Cursor
Best practices for using Bootstrap components and utilities effectively.
Bootstrap
CSS
A
Admin User24269
Create a Responsive Navigation Menu
Cursor
Guide to build a mobile-responsive navigation menu with hamburger icon.
CSS
JavaScript
Responsive Design
A
Admin User11232
CSS Grid Layout System
Cursor
Guidelines for using CSS Grid to create complex two-dimensional layouts.
CSS
CSS Grid
A
Admin User10520
Set Up a Basic HTML/CSS/JavaScript Project
Cursor
Complete guide to create a simple static website with HTML, CSS, and JavaScript.
HTML
CSS
JavaScript
A
Admin User239