Foundation - Sass

Advertisements

Previous Page
Next Page  

SASS helps to make the code more flexible and customizable in Foundation.

Compatibility

To install SASS based version for foundation, Ruby should be installed on Windows. Foundation can be compiled with Ruby SASS and libsass. We recommend node-sass 3.4.2+ version to compile SASS.

Autoprefixer Required

Autoprefixer handles SASS files. gulp-autoprefixer is used to build the process. The following autoprefixer setting is used to get proper browser support.

autoprefixer ({
   browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3']
});

Loading the Framework

We can install the framework files using NPM. Using command line interface (CLI), we can compile the Sass files. Following is the command to load the framework −

npm install foundation-sites --save

After running the above command line code, you will get the following lines −

Foundation sass

Compiling Manually

Framework files can be added as an import path depending upon on your build process, but the path will be the same packages_folder/foundation-sites/scss. The @import statement is included at the top of the foundation-sites.scss file. The next line in the given code is explained in the Adjusting CSS Output section.

@import 'foundation';
@include foundation-everything;

Using Compiled CSS

You can include the pre-compiled CSS files. There are two types of CSS files, i.e. minified and unminified. Minified version is used for production and the unminified version is used to directly edit the framework CSS.

<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.css">
<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.min.css">

Adjusting CSS Output

For various components, Foundation output consist of many classes. It is used to control the CSS output of the framework. Add the following single line of code to include all the components at once.

@include foundation-everything;

The following is the list of the components imported when you write the above code in your scss file. The components which are not necessary can be commented. You can view the below given code lines in the Your_folder_name/node_modules/foundation-sites/scss/foundation.scss file.

@import 'foundation';

@import 'grid/grid';
@import 'typography/typography';
@import 'forms/forms';
@import 'components/visibility';
@import 'components/float';
@import 'components/button';
@import 'components/button-group';
@import 'components/accordion-menu';
@import 'components/accordion';
@import 'components/badge';
@import 'components/breadcrumbs';
@import 'components/callout';
@import 'components/close-button';
@import 'components/drilldown';
...
...
...
//so on....

The Settings File

A settings file is included in the entire foundation project i.e. _settings.scss. If you are using Yeti Launch or the CLI to create a Foundation for Sites project, you can find the settings file under src/assets/scss/.

We have installed Foundation using npm, hence you can find the settings file included under your_folder_name/node_modules/foundation-sites/scss/settings/_settings.scss. You can move this into your own Sass files to work with.

You can write your own CSS, if you are not able to customize with variables. Following is a set of variables, which change the default styling of buttons.

$button-padding: 0.85em 1em;
$button-margin: 0 $global-margin $global-margin 0;
$button-fill: solid;
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: #fff;
$button-color-alt: #000;
$button-radius: $global-radius;

$button-sizes: (
   tiny: 0.6rem,
   small: 0.75rem,
   default: 0.9rem,
   large: 1.25rem,
);
$button-opacity-disabled: 0.25;
Advertisements