Sass Coding Standards

1. Style Guide

File Structure

Maintain a consistent directory structure using the 7-1 pattern:

core
{
  _colors.sass
  _config.sass
}

components
{
  _buttons.sass
  _cards.sass
}

modules
{
  _header.sass
  _footer.sass
}

themes
{
  _theme-1.sass
  _theme-2.sass
}

vendors
{
  _bootstrap.sass
  _font.sass
}

pages
{
  _home.sass
  _about.sass
}

utils
{
  _functions.sass
  _mixins.sass
}

app.sass

2. File Standards

Namings

Use kebab-case for filenames
Prefix partial files with underscore
Use semantic names (like _buttons, not _b)

Formatting

Indent with 2 spaces
Place selectors on separate lines when using nested syntax
Use a space after colons in property declarations

3. Syntax Standards

Variable Conventions ▼

Use $ prefix for all variables
Name colors, fonts, and spacing variables explicitly
Avoid abbreviations

$primary-color: #3b82f6;
$base-font-size: 1rem;
$border-radius: 0.5rem;

Selector Nesting ▼

Use indentation to show hierarchy
Limit nesting depth to 3 levels maximum
Use & for pseudo-classes

.card {
padding: 1rem;
&-content {
margin-top: 1rem;
:hover {
background-color: lighten($primary, 20%);
}
}
}

4. Best Practices

Performance Tips

Minimize global variables when possible
Use the @use at-rule for modularity
Avoid overqualifying selectors (.btn over div.btn)

Code Reuse

Create reusable mixins for complex patterns
Encapsulate related styles into _partials
Use @at-root for breaking deeply nested styles

5. Reference Examples


// _variables.sass
$primary: #374151;
$primary-hover: lighten($primary, 3%);
$base-padding: 1rem;


// base.sass
@import 'variables';

.container
  padding: $base-padding
  color: $primary
  &:hover
    color: $primary-hover