Menu icon Foundation
What are the best practices for creating and using SCSS partials in Foundation 6?

Hello all and happy holidays!

I was wondering: for Foundation 6, what is the best practice for creating and importing SCSS partials?

I currently have import statements in all my SCSSpartials (so that they can have access to F6 mixins and such), and it's not very DRY.

SITUATION:

1. Suppose I have a utility class called "_colors.scss" that contains my color SCSS variables: $color-one, etc.
2. I have an HTML page ("home.html") has 3 sections (divs).
3. Each section has styling that relies on the variables in the "_colors.scss" SCSS file.
4. You have a home.scss file that contains page-wide SCSS code for the home page. (Compiles to home.CSS)
5. To keep my SCSS files relatively clean, short, and structured, I decided to create 3 SCSS partials - one for each section (ie: for each div) and place them in a PARTIALS folder.
6. Within the home.scss file, I import each partial.

PROBLEM:

Without including an @import statement in each partial, the contents of that folder do not have access to the color variables. But putting an import statement in each partial violates DRY and causes repetition in the outputted CSS.

However, if I don't create SCSS partials, then my HOME.SCSS folder will be potentially very long and cluttered.

What is your solution for this?

// (Simplified) Project structure

// SampleProject/
//  - home.html
//  - home.scss
//  - _colors.scss
//  - partials/
//      - section-one.scss
//      - section-two.scss
//      - section-three.scss


// _colors.SCSS

$color-one: #FFF;
$color-two: #272727;

// index.html

<div class="section-one"></div>
<div class="section-two"></div>
<div class="section-three"></div>

// home.scss

@import "partials/section-one", 
        "partials/section-two", 
        "partials/section-three"; 

// partials/section-one.scss
@import "colors"; //<-----IS THERE ANY WAY TO AVOID THESE REPETITIVE IMPORTS?
@import "various foundation libraries"
// code specific to the first div

// partials/section-two.scss
@import "colors";
@import "various foundation libraries"
// code specific to the second div

// partials/section-three.scss
@import "colors";
@import "various foundation libraries"
// code specific to the third div
         

foundation 6PartialsscssimportBest Practice

Hello all and happy holidays!

I was wondering: for Foundation 6, what is the best practice for creating and importing SCSS partials?

I currently have import statements in all my SCSSpartials (so that they can have access to F6 mixins and such), and it's not very DRY.

SITUATION:

1. Suppose I have a utility class called "_colors.scss" that contains my color SCSS variables: $color-one, etc.
2. I have an HTML page ("home.html") has 3 sections (divs).
3. Each section has styling that relies on the variables in the "_colors.scss" SCSS file.
4. You have a home.scss file that contains page-wide SCSS code for the home page. (Compiles to home.CSS)
5. To keep my SCSS files relatively clean, short, and structured, I decided to create 3 SCSS partials - one for each section (ie: for each div) and place them in a PARTIALS folder.
6. Within the home.scss file, I import each partial.

PROBLEM:

Without including an @import statement in each partial, the contents of that folder do not have access to the color variables. But putting an import statement in each partial violates DRY and causes repetition in the outputted CSS.

However, if I don't create SCSS partials, then my HOME.SCSS folder will be potentially very long and cluttered.

What is your solution for this?

// (Simplified) Project structure

// SampleProject/
//  - home.html
//  - home.scss
//  - _colors.scss
//  - partials/
//      - section-one.scss
//      - section-two.scss
//      - section-three.scss


// _colors.SCSS

$color-one: #FFF;
$color-two: #272727;

// index.html

<div class="section-one"></div>
<div class="section-two"></div>
<div class="section-three"></div>

// home.scss

@import "partials/section-one", 
        "partials/section-two", 
        "partials/section-three"; 

// partials/section-one.scss
@import "colors"; //<-----IS THERE ANY WAY TO AVOID THESE REPETITIVE IMPORTS?
@import "various foundation libraries"
// code specific to the first div

// partials/section-two.scss
@import "colors";
@import "various foundation libraries"
// code specific to the second div

// partials/section-three.scss
@import "colors";
@import "various foundation libraries"
// code specific to the third div
         

This post has been closed. No new replies can be added.

Rafi Benkual over 3 years ago

This was written for F5 but the concepts are the same - http://zurb.com/university/lessons/avoid-a-cluttered-mess-sensible-sass-file-structure

The app.scss is the place where you add your mixin and components imports.

Example:

@import "settings";
@import "foundation";

@include foundation-everything;

// @include foundation-global-styles;
// @include foundation-grid;
// @include foundation-typography;
// @include foundation-button;
// @include foundation-forms;
// @include foundation-visibility-classes;
// @include foundation-float-classes;
// @include foundation-accordion;
// @include foundation-badge;
// @include foundation-breadcrumbs;
// @include foundation-button-group;
// @include foundation-callout;
// @include foundation-close-button;
// @include foundation-drilldown-menu;
// @include foundation-dropdown;
// @include foundation-dropdown-menu;
// @include foundation-flex-video;
// @include foundation-label;
// @include foundation-media-object;
// @include foundation-menu;
// @include foundation-off-canvas;
// @include foundation-orbit;
// @include foundation-pagination;
// @include foundation-progress-bar;
// @include foundation-slider;
// @include foundation-sticky;
// @include foundation-reveal;
// @include foundation-switch;
// @include foundation-table;
// @include foundation-tabs;
// @include foundation-thumbnail;
// @include foundation-title-bar;
// @include foundation-tooltip;
// @include foundation-top-bar;


// mixins

@import
  "mixins/colors";

// Components
@import
  "components/typography",
  "components/buttons",
  "components/colors-sites",
  "components/colors-emails",
  "components/colors-apps",
  "components/main-nav",
  "components/off-canvas-nav",
  "components/hero",
  "components/subnav",