--- name: sass url: /sass title: Sass ---

Customize With Sass

Customizing your project with Foundation is easy, we recommend making different changes in different files which we will go over here.


_settings.scss

You will want to make changes to the settings file which includes tons of variables here that can be customized for each component.

Making changes is simple, in _settings.scss find the element you want to style (command/ctrl+f). Find the variable, uncomment the style, and change its value. Be sure to compile your sass to see the changes take affect


Mixins

We use mixins to allow you to create your own components based on underlying Foundation styles.

A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. You can create custom mixins to speed up development, another example regarding buttons:

// Example mixin for custom button .custom-button-class { @include button($padding, $bg, $radius, $full-width, $disabled, $is-input); }

Here is an example of some variables you can customize:

// $padding - Used to build padding for buttons Default: $button-med or rem-calc(12) $padding: 12px; // Primary color set in settings file. Default: $primary-color. $bg: orange; // If true, set to button radius which is $global-radius or explicitly set radius amount in px (ex. $radius:10px). Default:false. $radius: true; // We can set $full-width:true to remove side padding extend width. Default: false $full-width: false; // We can set $disabled:true to create a disabled transparent button. Default: false $disabled: false; // $is-input - 's and