--- name: sass url: /sass title: Using Sass ---
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:
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.
Then you can use your custom button with this HTML: