Variables and Data Types Reference

// Color variables
$primary-color: #3498db;
$secondary-color: #2ecc71;
$text-color: #333;

// Spacing variables
$spacing-unit: 8px;
$margin-base: $spacing-unit * 2;

// Typography
$font-primary: 'Helvetica', sans-serif;
$font-size-base: 16px;

// Usage
.button {
  background: $primary-color;
  color: white;
  font-family: $font-primary;
  margin: $margin-base;
  
  &:hover {
    background: $secondary-color;
  }
}

// Global variable
$color: red;

.component {
  // Local variable (only in this block)
  $local-color: blue;
  color: $local-color;      // blue
  background: $color;       // red (global)
}

.another {
  color: $color;            // red (global accessible)
  // color: $local-color;   // ERROR: undefined
}

// Modifying global from local scope
.modifier {
  $color: green !global;    // Changes global $color
}

.test {
  color: $color;            // green (global was modified)
}

// Shadowing example
$size: 10px;

.shadow {
  $size: 20px;              // Local, shadows global
  font-size: $size;         // 20px (local)
  
  .nested {
    font-size: $size;       // 20px (parent local)
  }
}

.no-shadow {
  font-size: $size;         // 10px (global)
}

$theme: 'dark';
$side: 'left';
$size: 'large';

// Selector interpolation
.button-#{$theme} {
  background: black;
}
// Output: .button-dark { background: black; }

// Property interpolation
.box {
  margin-#{$side}: 20px;
}
// Output: .box { margin-left: 20px; }

// String interpolation
$base-path: '/assets/images';
.icon {
  background: url('#{$base-path}/icon.svg');
}

// Dynamic class generation
@each $sz in small, medium, large {
  .btn-#{$sz} {
    padding: #{$sz};
  }
}

// Media query interpolation
$breakpoint: '(min-width: 768px)';
@media #{$breakpoint} {
  .container { width: 750px; }
}

// Combining variables
$prefix: 'app';
$component: 'header';
.#{$prefix}-#{$component} {
  // .app-header
}

// _library.scss (component library)
$primary-color: blue !default;
$spacing: 8px !default;
$border-radius: 4px !default;

.button {
  background: $primary-color;
  padding: $spacing;
  border-radius: $border-radius;
}

// user-config.scss (user customization)
// Set BEFORE importing library
$primary-color: red;
$spacing: 12px;
// $border-radius not set, will use default

@import 'library';
// Result: red background, 12px padding, 4px radius

// ===================================
// Pattern: Configurable mixin
@mixin button($bg: null, $padding: null) {
  $bg: $bg or $primary-color !default;
  $padding: $padding or $spacing !default;
  
  background: $bg;
  padding: $padding;
}

// Modern module system
// _theme.scss
$color: blue !default;

// main.scss
@use 'theme' with (
  $color: red    // Override default
);

// Numbers
$width: 100;                  // Unitless
$height: 50px;                // With unit
$opacity: 0.75;               // Decimal
$duration: 2s;                // Time unit

// Strings
$font-quoted: "Helvetica";    // Quoted
$font-unquoted: Arial;        // Unquoted
$path: '/assets/images';      // Path string

// Colors
$color-hex: #3498db;
$color-rgb: rgb(52, 152, 219);
$color-rgba: rgba(52, 152, 219, 0.8);
$color-hsl: hsl(204, 70%, 53%);
$color-name: blue;

// Booleans
$is-dark-mode: true;
$is-mobile: false;

// Null
$optional-border: null;       // Won't output

// Lists
$margins: 10px 20px 10px 20px;
$colors: red, green, blue;
$mixed: (1px solid black);

// Maps
$theme: (
  primary: #3498db,
  secondary: #2ecc71,
  text: #333
);

// Usage examples
.box {
  width: $width + px;         // 100px
  border: $optional-border;   // Omitted (null)
  
  @if $is-dark-mode {
    background: black;
  }
}

// SCSS Variables (compile-time)
$primary: #3498db;
$spacing: 16px;

.button {
  background: $primary;        // Compiled to: background: #3498db;
  padding: $spacing;           // Compiled to: padding: 16px;
}

// CSS Custom Properties (runtime)
:root {
  --primary: #3498db;
  --spacing: 16px;
}

.button {
  background: var(--primary);  // Stays in CSS
  padding: var(--spacing);     // Can change at runtime
}

// ===================================
// Combining Both (Best Practice)
$default-primary: #3498db;

:root {
  --primary: #{$default-primary};  // SCSS sets initial value
  --spacing: 16px;
}

.button {
  background: var(--primary);
  
  // JavaScript can change:
  // element.style.setProperty('--primary', 'red');
}

// ===================================
// Theme switching with CSS variables
.theme-light {
  --bg: white;
  --text: black;
}

.theme-dark {
  --bg: black;
  --text: white;
}

.component {
  background: var(--bg);
  color: var(--text);
  // Theme switches without recompiling!
}

// SCSS variables for theme
$themes: (
  light: (bg: white, text: black),
  dark: (bg: black, text: white)
);

@each $theme, $colors in $themes {
  .theme-#{$theme} {
    --bg: #{map-get($colors, bg)};
    --text: #{map-get($colors, text)};
  }
}