scss-best-practices

// main.scss
@use 'abstracts/variables';
@use 'abstracts/functions';
@use 'abstracts/mixins';
@use 'abstracts/placeholders';
 
@use 'vendors/normalize';
 
@use 'base/reset';
@use 'base/typography';
@use 'base/base';
 
@use 'layout/grid';
@use 'layout/header';
@use 'layout/navigation';
@use 'layout/footer';
 
@use 'components/buttons';
@use 'components/cards';
@use 'components/forms';
 
@use 'pages/home';
 
@use 'themes/default';

// Use semantic, descriptive names
// Format: $category-property-variant
 
// Colors
$color-primary: #3498db;
$color-primary-light: lighten($color-primary, 15%);
$color-primary-dark: darken($color-primary, 15%);
$color-secondary: #2ecc71;
$color-text: #333333;
$color-text-muted: #666666;
$color-background: #ffffff;
$color-border: #e0e0e0;
$color-error: #e74c3c;
$color-success: #27ae60;
$color-warning: #f39c12;
 
// Typography
$font-family-base: 'Helvetica Neue', Arial, sans-serif;
$font-family-heading: 'Georgia', serif;
$font-size-base: 1rem;
$font-size-small: 0.875rem;
$font-size-large: 1.25rem;
$font-weight-normal: 400;
$font-weight-bold: 700;
$line-height-base: 1.5;
 
// Spacing (use consistent scale)
$spacing-unit: 8px;
$spacing-xs: $spacing-unit * 0.5;  // 4px
$spacing-sm: $spacing-unit;        // 8px
$spacing-md: $spacing-unit * 2;    // 16px
$spacing-lg: $spacing-unit * 3;    // 24px
$spacing-xl: $spacing-unit * 4;    // 32px
$spacing-xxl: $spacing-unit * 6;   // 48px
 
// Breakpoints
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
$breakpoint-xxl: 1400px;
 
// Z-index scale
$z-index-dropdown: 1000;
$z-index-sticky: 1020;
$z-index-fixed: 1030;
$z-index-modal-backdrop: 1040;
$z-index-modal: 1050;
$z-index-popover: 1060;
$z-index-tooltip: 1070;
 
// Transitions
$transition-base: 0.3s ease;
$transition-fast: 0.15s ease;
$transition-slow: 0.5s ease;
 
// Border radius
$border-radius-sm: 2px;
$border-radius-md: 4px;
$border-radius-lg: 8px;
$border-radius-pill: 50px;
$border-radius-circle: 50%;
 
// Shadows
$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
$shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
$shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
$shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

// Use maps for grouped values
$colors: (
  'primary': #3498db,
  'secondary': #2ecc71,
  'danger': #e74c3c,
  'warning': #f39c12,
  'info': #17a2b8,
  'success': #27ae60
);
 
$breakpoints: (
  'sm': 576px,
  'md': 768px,
  'lg': 992px,
  'xl': 1200px,
  'xxl': 1400px
);
 
// Access with map-get
.element {
  color: map-get($colors, 'primary');
}

@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @warn "Unknown breakpoint: #{$breakpoint}";
  }
}
 
// Usage
.element {
  width: 100%;
 
  @include respond-to('md') {
    width: 50%;
  }
 
  @include respond-to('lg') {
    width: 33.333%;
  }
}

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
 
@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
 
@mixin flex-column {
  display: flex;
  flex-direction: column;
}

@mixin font-size($size, $line-height: null) {
  font-size: $size;
  @if $line-height {
    line-height: $line-height;
  }
}
 
@mixin truncate($lines: 1) {
  @if $lines == 1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@mixin visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
 
@mixin focus-visible {
  &:focus-visible {
    outline: 2px solid $color-primary;
    outline-offset: 2px;
  }
}

// Block: Standalone component
// Element: Part of block (block__element)
// Modifier: Variant (block--modifier or block__element--modifier)
 
.card {
  // Block styles
  background: $color-background;
  border-radius: $border-radius-md;
  box-shadow: $shadow-md;
 
  // Element
  &__header {
    padding: $spacing-md;
    border-bottom: 1px solid $color-border;
  }
 
  &__title {
    margin: 0;
    font-size: $font-size-large;
    font-weight: $font-weight-bold;
  }
 
  &__body {
    padding: $spacing-md;
  }
 
  &__footer {
    padding: $spacing-md;
    border-top: 1px solid $color-border;
  }
 
  // Modifier
  &--featured {
    border: 2px solid $color-primary;
  }
 
  &--compact {
    .card__header,
    .card__body,
    .card__footer {
      padding: $spacing-sm;
    }
  }
}

// BAD: Too deep nesting
.nav {
  .nav-list {
    .nav-item {
      .nav-link {
        .nav-icon {
          // 5 levels deep - avoid this
        }
      }
    }
  }
}
 
// GOOD: Keep nesting to 3 levels maximum
.nav {
  // Level 1
}
 
.nav__list {
  // Level 1
}
 
.nav__item {
  // Level 1
}
 
.nav__link {
  color: $color-text;
 
  &:hover,
  &:focus {
    // Level 2 - acceptable for states
    color: $color-primary;
  }
 
  &--active {
    // Level 2 - acceptable for modifiers
    color: $color-primary;
    font-weight: $font-weight-bold;
  }
}

.component {
  // Direct child pseudo-elements
  &::before,
  &::after {
    content: '';
  }
 
  // State modifiers
  &:hover,
  &:focus,
  &:active {
    // State styles
  }
 
  // BEM modifiers
  &--variant {
    // Modifier styles
  }
 
  // Media queries
  @include respond-to('md') {
    // Responsive styles
  }
}

@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}
 
@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}
 
// Usage
.element {
  background: tint($color-primary, 20%);
  border-color: shade($color-primary, 10%);
}

@function px-to-rem($px, $base: 16) {
  @return ($px / $base) * 1rem;
}
 
@function rem-to-px($rem, $base: 16) {
  @return ($rem / 1rem) * $base * 1px;
}
 
// Usage
.element {
  font-size: px-to-rem(18); // 1.125rem
  padding: px-to-rem(24);   // 1.5rem
}

@function spacing($multiplier) {
  @return $spacing-unit * $multiplier;
}
 
// Usage
.element {
  margin-bottom: spacing(2); // 16px
  padding: spacing(3);       // 24px
}

// Define placeholder
%button-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: $spacing-sm $spacing-md;
  border: none;
  border-radius: $border-radius-md;
  font-family: inherit;
  font-size: $font-size-base;
  font-weight: $font-weight-bold;
  text-decoration: none;
  cursor: pointer;
  transition: all $transition-base;
 
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}
 
// Extend placeholder
.btn-primary {
  @extend %button-base;
  background: $color-primary;
  color: white;
 
  &:hover:not(:disabled) {
    background: darken($color-primary, 10%);
  }
}
 
.btn-secondary {
  @extend %button-base;
  background: transparent;
  color: $color-primary;
  border: 2px solid $color-primary;
 
  &:hover:not(:disabled) {
    background: $color-primary;
    color: white;
  }
}

// Spacing utilities
$spacing-directions: (
  '': '',
  't': '-top',
  'r': '-right',
  'b': '-bottom',
  'l': '-left',
  'x': '-inline',
  'y': '-block'
);
 
@each $abbr, $direction in $spacing-directions {
  @for $i from 0 through 8 {
    .m#{$abbr}-#{$i} {
      margin#{$direction}: spacing($i);
    }
    .p#{$abbr}-#{$i} {
      padding#{$direction}: spacing($i);
    }
  }
}
 
// Color utilities
@each $name, $color in $colors {
  .text-#{$name} {
    color: $color;
  }
  .bg-#{$name} {
    background-color: $color;
  }
  .border-#{$name} {
    border-color: $color;
  }
}

// _variables.scss
$primary: #3498db;
 
// _mixins.scss
@use 'variables' as vars;
 
@mixin themed-button {
  background: vars.$primary;
}
 
// main.scss
@use 'mixins';
 
.button {
  @include mixins.themed-button;
}

@use 'sass:math';
@use 'sass:color';
@use 'sass:list';
@use 'sass:map';
@use 'sass:string';
 
.element {
  width: math.div(100%, 3);
  background: color.adjust($color-primary, $lightness: 10%);
}