--- 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

Here's an example set of settings variables. These change the default styling of buttons:

$button-padding: 0.85em 1em !default; $button-margin: 0 $global-padding $global-padding 0 !default; $button-style: solid !default; $button-background: $primary-color !default; $button-color: auto !default; $button-radius: 0 !default; $button-sizes: ( tiny: 0.7, small: 0.8, medium: 1, large: 1.3, ) !default; $button-font-size: 0.9rem !default; $button-opacity-disabled: 0.5 !default; $button-tag-selector: true !default;

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); }

Then you can use your new custom button by simply include the following html:

...