Foundation Customization

Foundation Sass Variables:

// Custom color palette
$primary-color: #2c3e50;
$secondary-color: #34495e;
$success-color: #27ae60;
$warning-color: #f39c12;
$alert-color: #e74c3c;

// Custom colors
$custom-color-1: #ff6b6b;
$custom-color-2: #4ecdc4;
$custom-color-3: #45b7d1;

// Brand colors
$brand-blue: #3498db;
$brand-purple: #9b59b6;
$brand-green: #2ecc71;

// Using custom colors
.custom-button {
  background: $custom-color-1;
  color: white;
  
  &:hover {
    background: darken($custom-color-1, 10%);
  }
}

Foundation Sass Typography Variables:

// Font families
$font-family-sans-serif: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
$font-family-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
$font-family-monospace: 'Courier New', Courier, monospace;

// Font weights
$font-weight-normal: 400;
$font-weight-bold: 700;
$font-weight-light: 300;

// Heading sizes
$header-font-family: $font-family-sans-serif;
$header-font-weight: $font-weight-bold;
$header-line-height: 1.2;

// Body text
$body-font-family: $font-family-serif;
$body-font-weight: $font-weight-normal;
$body-line-height: 1.8;

// Custom font sizes
$h1-font-size: 3rem;
$h2-font-size: 2.5rem;
$h3-font-size: 2rem;
$small-font-size: 0.875rem;

// Responsive typography
$header-styles: (
  small: (
    'h1': ('font-size': 24),
    'h2': ('font-size': 20),
  ),
  medium: (
    'h1': ('font-size': 48),
    'h2': ('font-size': 40),
  ),
);

Foundation Sass Grid Variables:

// Grid settings
$grid-columns: 12;
$grid-margin-gutters: (
  small: 20px,
  medium: 30px,
);
$grid-padding-gutters: $grid-margin-gutters;

// Breakpoints
$breakpoints: (
  small: 0px,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);

// Container widths
$container-max-width: 1200px;
$container-padding: 20px;

// Custom grid classes
.grid-custom {
  @include grid-column(3);
}

.grid-wide {
  @include grid-column(9);
}

// Responsive grid adjustments
@include breakpoint(medium) {
  .grid-custom {
    @include grid-column(4);
  }
}

Foundation Sass Component Variables:

// Button customization
$button-padding: 0.85em 1.5em;
$button-margin: 0 0 $global-margin 0;
$button-radius: 8px;
$button-border: 2px solid transparent;

// Button states
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: $white;
$button-color-alt: $black;

// Custom button styles
.pill-button {
  border-radius: 50px;
  padding: 0.75em 2em;
  font-weight: $font-weight-bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.shadow-button {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  
  &:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
  }
}

.gradient-border-button {
  border: 2px solid transparent;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(45deg, #ff6b6b, #4ecdc4) border-box;
}

Foundation Sass Utility Variables:

// Spacing scale
$spacing-scale: (
  0: 0,
  1: 0.25rem,
  2: 0.5rem,
  3: 1rem,
  4: 1.5rem,
  5: 3rem,
  6: 4.5rem,
  7: 6rem,
);

// Border radius
$global-radius: 4px;
$global-rounded: 1000px;

// Custom utilities
.rounded-lg {
  border-radius: 12px;
}

.shadow-custom {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.border-custom {
  border: 2px dashed $primary-color;
}

// Generating custom utility classes
@each $name, $color in $custom-colors {
  .bg-#{$name} {
    background-color: $color;
  }
  
  .text-#{$name} {
    color: $color;
  }
}

// Responsive utilities
@include breakpoint(medium) {
  .md-rounded-lg {
    border-radius: 12px;
  }
}

Custom Build Setup

package.json scripts:

{
  "scripts": {
    "build:sass": "sass scss/app.scss dist/css/app.css",
    "watch:sass": "sass --watch scss/app.scss dist/css/app.css",
    "build:production": "sass scss/app.scss dist/css/app.css --style=compressed",
    "build:foundation": "sass scss/foundation.scss dist/css/foundation.css"
  }
}

Main SCSS File (app.scss):

// Foundation settings
@import 'settings';

// Foundation components
@import 'foundation';
@include foundation-everything;

// Custom components
@import 'components/buttons';
@import 'components/cards';
@import 'components/forms';
@import 'components/navigation';

// Utilities
@import 'utilities/spacing';
@import 'utilities/colors';
@import 'utilities/display';

// Theme
@import 'theme/light';
@import 'theme/dark';

Settings File (settings.scss):

// Import foundation settings
@import '~foundation-sites/scss/util/util';

// Custom settings
@import 'settings/colors';
@import 'settings/typography';
@import 'settings/grid';
@import 'settings/components';

// Override foundation defaults
$global-font-size: 16px;
$global-width: 1200px;
$global-margin: 1rem;
$global-padding: 1rem;