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

Using Sass

All of the Foundation frameworks are written in Sass, which allows us to make the codebase customizable and flexible.


The Settings File

All Foundatiion projects include a settings file, named _settings.scss. If you're using the CLI to create a Foundation for Apps project, you can find the settings file under client/assets/scss/. If you're installing the framework standalone using Bower or npm, there's a settings file included in those packages, which you can move into your own Sass files to work with.

Every component includes a set of variables that modify core structural or visual styles. If there's something you can't customize with a variable, you'll need to write your own CSS to add it.

To change a default value, find the variable you're looking for, uncomment it by removing the slashes (//) at the start of the line, and change the value. Uncommenting signifies that you want the value to change, and also functions as a handy visual aid to see which defaults you're overriding.

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;

Component Mixins

Every Foundation component is written with multiple Sass mixins. We use these mixins to generate the final CSS output. But you don't need to use our built-in classes! Using the mixins, you can build your own class structure.

Here's a basic example, using the button() mixin.

// Example mixin for custom button .cta-button { @include button(large, $background: pink, $color: white); }

Then you can use your custom button with this HTML:

Buy Now