Sass Style Guide

Introduction

Sass (Syntactically Awesome Style Sheets) remains one of the most powerful CSS preprocessors available, enabling developers to write cleaner, more maintainable, and more scalable stylesheets. This style guide provides comprehensive recommendations for writing Sass code that scales across teams and projects.

Following these conventions ensures your stylesheets remain readable, maintainable, and performant--whether you're working on a small business website or a large enterprise application. Consistent coding standards improve collaboration, reduce technical debt, and make onboarding new developers faster. Our web development services team regularly applies these Sass patterns to build maintainable frontend architectures.

Modern Module System: Using @use

The @use rule replaces the deprecated @import with better namespace management and scope isolation. While @import made everything global and caused duplicate CSS output, @use creates a namespace for each imported file. For similar patterns in TypeScript, see our guide on TypeScript Mixins Examples and Use Cases which explores comparable composition patterns.

Key Differences from @import

• Creates a namespace for each imported file
• Variables, mixins, and functions are not global
• Prevents duplicate CSS output

// _buttons.scss
@mixin primary-button {
 background-color: $primary-color;
 color: white;
 padding: 0.5em 1em;
}

// main.scss
@use 'buttons' as btn;

.submit {
 @include btn.primary-button;
}

Recommended Folder Structure

sass/
├── base/ # Resets, typography, elements
├── components/ # Buttons, cards, forms, nav
├── layout/ # Grid, header, footer
├── pages/ # Page-specific styles
├── themes/ # Visual themes
├── utils/ # Functions, mixins, variables
└── main.scss # Entry point

You can customize the namespace using the as keyword, and for node_modules packages, the package name serves as the default namespace. This modular approach keeps your global scope clean and makes dependencies explicit for team collaboration.

Extend and Inheritance: Sharing Style Patterns

The @extend directive allows selectors to inherit styles from other selectors, reducing code duplication when multiple elements share similar styling with minor variations.

Placeholder Classes

Placeholder classes (defined with % instead of .) only appear in compiled CSS when extended, keeping output lean. If a placeholder is never extended, it does not appear in the output at all.

%message-shared {
 border: 1px solid #ccc;
 padding: 10px;
 color: #333;
}

.message {
 @extend %message-shared;
}

.success {
 @extend %message-shared;
 border-color: green;
}

.error {
 @extend %message-shared;
 border-color: red;
}

Use @extend judiciously, as it creates selector relationships that can make debugging more challenging. For simple style sharing, consider whether a mixin or CSS custom properties would be more appropriate. The placeholder approach keeps your compiled CSS lean while enabling style sharing between related components.

Best Practices Summary

Mobile-First Approach

Write base styles for mobile first, then use min-width media queries for larger screens. This methodology aligns with how browsers process CSS and often results in more efficient stylesheets since mobile styles are the default.

Avoid These Anti-Patterns

Unit Consistency Rules

• Zero values: no units (margin: 0 not margin: 0px)
• Duration values: always include units (animation-delay: 0.5s)
• Add leading zero for decimals (0.5 not .5)

Naming Conventions

• Use descriptive names: .submit-button not .blue-button
• Consider BEM: .block__element--modifier
• Use SCREAMING_SNAKE_CASE for constants

The BEM methodology provides a structured naming convention that scales well for large projects. Blocks represent standalone components, elements are parts of blocks, and modifiers are variations of blocks or elements. Following these conventions creates stylesheets that remain maintainable as projects grow.

Conclusion

A consistent Sass style guide transforms stylesheets from difficult-to-maintain collections into organized, scalable codebases. Key principles to remember:

1. Organize with partials - Split code into focused, modular files
2. Use @use module system - Keep namespaces clean and explicit
3. Limit nesting depth - Keep selectors maintainable
4. Define variables for reusable values - Enable consistent updates
5. Write mobile-first responsive styles - Align with browser processing

Following these conventions ensures your Sass code remains readable, maintainable, and performant across projects of any size. When in doubt, prioritize readability and maintainability over clever shortcuts that may cause confusion for future maintainers.

Need help implementing these Sass patterns in your projects? Our frontend development team specializes in building maintainable, scalable styling architectures using modern CSS preprocessors and methodologies.

Sources

1. Sass Basics - sass-lang.com - Official Sass documentation covering preprocessing, variables, nesting, partials, modules, mixins, inheritance, and operators
2. Sass Style Guide - sass-lang.com - Official brand and coding guidelines for the Sass project
3. 8 SCSS Best Practices - DEV Community - Practical SCSS coding guidelines for mobile-first approach and avoiding anti-patterns