Web Development,

5 Tips to Help You Get the Best out of Sass

Sass creates Syntactically Awesome Style sheets, or at least thats what it is supposed to do.

When used effectively, Sass helps to build scalable and DRY CSS. When used incorrectly however, Sass can actually increase file size and add unnecessary or duplicate code.

Below is a series of hints and tips to help you get the best out of Sass…

1. Structure Your Sass

Getting your site structure correct from the beginning is vital for any new Sass project. Using partials allows you to break the CSS up into smaller more manageable blocks of code that are easier to maintain and develop.

Partial files are created using an underscore and are not output as separate CSS files. Each partial should be imported using a master Sass file (global.scss) in the root of the Sass folder.

For example, here’s a sample folder structure to demonstrate this:

vendor/
base/
|
|-- _variables.scss
|-- _mixins.scss
|-- _placeholders.scss

framework/
modules/
global.scss

This folder structure ensures the site is easy to work with, and add to. For example, new modules can easily be added to the module folder and then added to global.scss using @import.

To demonstrate, here’s a sample global.scss file:

/* VENDOR - Default fall-backs and external files.
========================================================================== */

@import 'vendor/_normalize.scss';


/* BASE - Base Variable file along with starting point Mixins and Placeholders.
========================================================================== */

@import 'base/_variables.scss';
@import 'base/_mixins.scss';
@import 'base/_placeholders.scss';


/* FRAMEWORK - Structure and layout files.
========================================================================== */

@import 'framework/_grid.scss';
@import 'framework/_breakpoints.scss';
@import 'framework/_layout.scss';


/* MODULES - Re-usable site elements.
========================================================================== */ 

@import 'modules/_buttons.scss';
@import 'modules/_lists.scss';
@import 'modules/_tabs.scss';

And as a side point, you might want to check out Hugo’s extensive post on Sass architecture for more tips in this area.

2. Use Sass Variables More Effectively

Variables are one of the more straightforward features of Sass but are still on occasion used incorrectly. Creating a site-wide naming convention is essential when working with Variables. Without one, they become harder to understand and re-use.

Here are some tips for creating useful variables:

  • Don’t be to vague when naming your Variables.
  • Have and stick to a naming convention (Modular, BEM, etc.)
  • Ensure the variable use is justified.

Here are some good examples:

$orange: #ffa600; 
$grey: #f3f3f3; 
$blue: #82d2e5;

$link-primary: $orange;
$link-secondary: $blue;
$link-tertiary: $grey;

$radius-button: 5px;
$radius-tab: 5px;

And some bad examples:

$link: #ffa600;
$listStyle: none;
$radius: 5px;

3. Reduce Mixin Usage

mixin is a great way to include sections of code multiple times within a site. However, including a mixin is the same as copying and pasting the styles throughout the CSS file. It creates a mass of duplicate code and can bloat your CSS file.

A mixin therefore should only be used if an argument is present, to quickly create modified styles.

Here’s an example:

@mixin rounded-corner($arc) {
    -moz-border-radius: $arc;
    -webkit-border-radius: $arc;
    border-radius: $arc;  
}

This rounded-corner mixin can be used in any situation simply by changing the value of $arc, making it a worthwhile mixin:

.tab-button {
     @include rounded-corner(5px); 
}

.cta-button {
     @include rounded-corner(8px); 
}

A bad example might look like this:

@mixin cta-button {
    padding: 10px;
    color: #fff;
    background-color: red;
    font-size: 14px;
    width: 150px;
    margin: 5px 0;
    text-align: center;
    display: block;
}

This mixin has no argument and would therefore be better written as a placeholder, which brings us to point 4.

4. Embrace Placeholders

Unlike mixins, placeholders can be used multiple times without adding any duplicate code. This makes them a much friendlier option for outputting DRY CSS:

%bg-image {
    width: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.image-one {
    @extend %bg-image;
    background-image:url(/img/image-one.jpg");
}

.image-two {
    @extend %bg-image;
    background-image:url(/img/image-two.jpg");
}

And the compiled CSS:

.image-one, .image-two {
    width: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.image-one {
    background-image:url(/img/image-one.jpg") ;
}

.image-two {
    background-image:url(/img/image-two.jpg") ;
}

The repeated code in the placeholder is output only once with only the unique styles being applied to the individual selectors. If unused, the placeholder styles are not output at all.

Tying in with point 3, placeholders can be used alongside mixins to reduce duplicate code and still keep the flexibility of a mixin…

/* PLACEHOLDER 
============================================= */

%btn {
    padding: 10px;
    color:#fff;
    curser: pointer;
    border: none;
    shadow: none;
    font-size: 14px;
    width: 150px;
    margin: 5px 0;
    text-align: center;
    display: block;
}

/* BUTTON MIXIN 
============================================= */

@mixin  btn-background($btn-background) {
    @extend %btn;
    background-color: $btn-background;
    &:hover {
        background-color: lighten($btn-background,10%);
    }
}

/* BUTTONS
============================================= */

.cta-btn {
    @include btn-background(green);
}

.main-btn {
    @include btn-background(orange);
}

.info-btn {
    @include btn-background(blue);
}

5. Use Functions for Calculations

Functions are used to perform calculations. A Sass function does not output any CSS. Instead, it returns a value that can be used in the CSS. This is useful for calculations that will be made throughout the site.

For example, functions are useful for calculating the percentage width of a given element:

@function calculate-width ($col-span) {
    @return 100% / $col-span 
}

.span-two {
    width: calculate-width(2); // spans 2 columns, width = 50%
}

.span-three {
    width: calculate-width(3); // spans 3 columns, width = 33.3%
}
Credits:
Post you may like
Hosting / Optimization / Web Development / Wordpress /

11 Ways to Boost WordPress Websites

Web Development / Wordpress /

Top 9 WordPress Ecommerce Plugins

Wordpress / Wordpress Bug Fixes / Wordpress Snippets /

WordPress 4.9 Template Detecting Issue

When it comes to creating professional and effective websites,
there is no company that can surpass Innozilla. Thanks to their talent, our site has taken off in the search engines like a rocket. In this day and age, it is impossible to get ahead as a business without the support of gurus like Innozilla standing behind you.

Savier Ferrer / All Miami Party Rental

Innozilla have taken our business to the next level.
Their professional solutions continue to impress us and their knowledge has catapulted our sales.
They have created 4 different websites for our companies; all with excellent results.
I will sure use them for all my upcoming projects and recommend them!!

Ronny Esquenazi / WMCP

What a wonderful experience it was to hire someone that I’ve never met on the other side of the planet! I have had the pleasure of working with Innozilla for the creation of howwelist.com, and several other sites I have built since then. He made the process painless, and I would recommend him to anyone that is needing help in multiple scopes of website creation. Consistently going above and beyond to always answer my questions within a timely manner, Innozilla Web Solutions is a true professional. All in all, the distance wasn’t a hurdle, the language barrier wasn’t an issue.

Ballard Sweat / Team Leader - The Sweat Team