Separate Your Layout and skin Sass files

One of the greatest things about Sass is the ability it provides to separate large files in to more manageable chunks of code. When working on large or complex sites and future proofing code this becomes even more significant.

Without adding any additional requests to the web site’s head or effecting site speed and load times, css can be split out in to easy to manage folders and files. Developers should never again be faced with an endless css file packed with all the theming, styles, colours, typography, structure and media queries of an entire website.

This provides the perfect opportunity to separate the layout and structural css from the style or ‘skin’ css. In doing this the code becomes much easier to maintain, and if necessary to change or update in the future.

Layout.scss

The layout file should be for structural styles only, building the wireframe of a page without applying any of it’s look or feel. The layout.scss file will therefore remain small and easy to follow for any developer picking up the project and needing to make a quick edit to the page layout.

.container {
    @include clearfix;
    width: 100%;
    margin: 10px 0;
}

.logo {
   @include grid(3);
}

.search {
   @include grid(6);
}

.social-share {
   @include grid(3);
}

The css above is easy to read as each selector has only the layout includes assigned to it. As pages get bigger and more elements are added keeping the grid includes clear and easy to find becomes essential. Making changes to the widths or even adding in a new column can be easily done by adjusting the values passed to the grid mixin.

.logo {
   @include grid(3);
}
.search {
   @include grid(3);
}
.social-share {
   @include grid(3);
}
.call-us {
   @include grid(3);
}

Taking things a step further

The break point mixin can also be added to the layout file helping to keep all the layout properties together. For responsive sites I also recommend creating a third style sheet to deal solely with the media queries.

.logo {
  @include grid(3);
  @include breakpoint(tablet, 6);
}

The separate Sass files can be compiled using a base style.scss file. Below is an example of how that stylesheet would look using folders for the three separated sass files on each page.

/* product page - unique product page styles
========================================================================== */

    @import 'product-page/_layout.scss';
    @import 'product-page/_theme.scss';
    @import 'product-page/_responsive.scss';


/* category page - unique category page styles
========================================================================== */

    @import 'category-page/_layout.scss';
    @import 'category-page/_theme.scss';
    @import 'category-page/_responsive.scss';

Share on Twitter