Foundation CSS Customization with Sass

Installation via npm/yarn:

# Using npm
npm install foundation-sites sass

# Using yarn
yarn add foundation-sites sass

Basic Sass Import Structure:

// main.scss
@charset 'utf-8';

// Import Foundation settings first
@import 'settings';

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

// Your custom styles
@import 'custom';

Create a _settings.scss file to override defaults:

// _settings.scss

// Global Colors
$primary-color: #1779ba;
$secondary-color: #767676;
$success-color: #3adb76;
$warning-color: #ffae00;
$alert-color: #cc4b37;

// Global Styles
$global-font-size: 100%;
$global-width: 1200px;
$global-lineheight: 1.5;
$body-background: #fefefe;
$body-font-color: #0a0a0a;
$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;

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

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

// Button Customization
$button-padding: 0.85em 1em;
$button-margin: 0 0 $global-margin 0;
$button-radius: 3px;
$button-sizes: (
  tiny: 0.6rem,
  small: 0.75rem,
  default: 0.9rem,
  large: 1.25rem,
);

Selective Component Import:

// main.scss
@charset 'utf-8';

// Import settings
@import 'settings';

// Import Foundation utilities
@import 'foundation';
@include foundation-global-styles;
@include foundation-typography;
@include foundation-forms;
@include foundation-button;

// Import only the components you need
@include foundation-grid;
@include foundation-xy-grid-classes;
@include foundation-flex-classes;
@include foundation-visibility-classes;
@include foundation-float-classes;
@include foundation-menu;
@include foundation-top-bar;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-responsive-embed;
@include foundation-media-object;
@include foundation-card;
@include foundation-accordion;
@include foundation-accordion-menu;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@include foundation-close-button;
@include foundation-menu-icon;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-sticky;
@include foundation-switch;
@include foundation-table;
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-title-bar;
@include foundation-tooltip;

// Import your custom styles
@import 'custom';

Custom Component with Foundation Mixins:

// _custom.scss

// Custom Card Component
.custom-card {
  @include card-container(
    $background: #fff,
    $color: $body-font-color,
    $border: 1px solid $light-gray,
    $radius: $global-radius,
    $shadow: 0 2px 5px rgba($black, 0.1),
    $padding: $card-padding,
    $margin: $card-margin
  );
  
  &-header {
    padding: $card-padding;
    border-bottom: 1px solid $light-gray;
    background: $light-gray;
    
    h3 {
      margin-bottom: 0;
      color: $primary-color;
    }
  }
  
  &-body {
    padding: $card-padding;
  }
  
  &-footer {
    padding: $card-padding;
    border-top: 1px solid $light-gray;
    background: $light-gray;
  }
}

// Custom Button Variants
.btn-gradient {
  @include button;
  @include button-style(
    $background: linear-gradient(135deg, $primary-color 0%, darken($primary-color, 15%) 100%),
    $background-hover: linear-gradient(135deg, darken($primary-color, 5%) 0%, darken($primary-color, 20%) 100%),
    $color: $white,
    $radius: 50px
  );
  border: none;
  font-weight: $global-weight-bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

// Custom Breakpoint Mixins
@include breakpoint(medium) {
  .custom-responsive {
    display: flex;
    flex-wrap: wrap;
    
    &-item {
      flex: 1 0 50%;
    }
  }
}

@include breakpoint(large) {
  .custom-responsive-item {
    flex: 1 0 33.333%;
  }
}

Using Foundation's Sass Functions:

// Color Functions
.custom-element {
  // Lighten a color
  background-color: lighten($primary-color, 20%);
  
  // Darken a color
  color: darken($body-font-color, 10%);
  
  // Adjust transparency
  border-color: rgba($secondary-color, 0.5);
  
  // Get contrast color (white or black)
  color: color-pick-contrast($primary-color, $white, $black);
}

// Math Functions
.grid-calc {
  // Calculate widths
  width: rem-calc(1200px);
  height: percentage(1/3);
  
  // Strip unit
  $margin: strip-unit($global-margin);
  padding: ($margin * 2) + px;
}

// String Functions
.selector {
  // Check if value exists
  @if map-has-key($breakpoints, large) {
    @include breakpoint(large) {
      display: block;
    }
  }
}

Creating a Theme Configuration File:

// _theme.scss

// Color Palette
$theme-colors: (
  'primary': #1779ba,
  'secondary': #767676,
  'success': #3adb76,
  'warning': #ffae00,
  'alert': #cc4b37,
  'light': #f6f6f6,
  'dark': #1a1a1a,
  'info': #5bc0de,
  'muted': #999
);

// Typography Scale
$theme-typography: (
  'h1': 2.5rem,
  'h2': 2rem,
  'h3': 1.75rem,
  'h4': 1.5rem,
  'h5': 1.25rem,
  'h6': 1rem,
  'small': 0.875rem,
  'large': 1.25rem
);

// Spacing Scale
$theme-spacing: (
  'xs': 0.25rem,
  'sm': 0.5rem,
  'md': 1rem,
  'lg': 1.5rem,
  'xl': 2rem,
  'xxl': 3rem
);

// Border Radius
$theme-radius: (
  'sm': 2px,
  'md': 4px,
  'lg': 8px,
  'pill': 50px,
  'circle': 50%
);

// Shadows
$theme-shadows: (
  'sm': 0 1px 3px rgba(0,0,0,0.12),
  'md': 0 4px 6px rgba(0,0,0,0.1),
  'lg': 0 10px 20px rgba(0,0,0,0.15),
  'xl': 0 20px 40px rgba(0,0,0,0.2)
);

// Theme Mixins
@mixin theme-card($color: 'primary') {
  @include card-container;
  border-left: 4px solid map-get($theme-colors, $color);
  
  .card-header {
    background-color: lighten(map-get($theme-colors, $color), 40%);
    color: map-get($theme-colors, $color);
  }
}

@mixin theme-button($color: 'primary') {
  @include button;
  @include button-style(
    $background: map-get($theme-colors, $color),
    $background-hover: darken(map-get($theme-colors, $color), 10%),
    $color: color-pick-contrast(map-get($theme-colors, $color))
  );
}

package.json Scripts:

{
  "name": "foundation-project",
  "version": "1.0.0",
  "scripts": {
    "build:css": "sass scss/main.scss:dist/css/main.css --style=compressed",
    "watch:css": "sass --watch scss/main.scss:dist/css/main.css",
    "build": "npm run build:css",
    "dev": "npm run watch:css"
  },
  "dependencies": {
    "foundation-sites": "^6.7.4",
    "sass": "^1.49.0"
  }
}

Folder Structure:

foundation-project/
├── scss/
│   ├── _settings.scss      # Foundation settings overrides
│   ├── _theme.scss         # Custom theme variables
│   ├── _custom.scss        # Custom components
│   ├── _utilities.scss     # Utility classes
│   └── main.scss           # Main Sass file
├── dist/
│   └── css/
│       └── main.css        # Compiled CSS
├── package.json
└── README.md