Published on
A series of hints and 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.
Published on
Article originally posted on Sitepoint.
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…
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.scssThis 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.
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:
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;A 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.
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);
}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%
}Place all mixins, functions, placeholders and variables in their relevant partial file. Keeping blocks of code together will ensure they are easy to edit and reuse in the future.
Site-wide elements should be kept together in a base folder. The base folder should contain global variables such as fonts and colour schemes:
$font-primary: 'roboto', sans-serif;
$font-secondary: arial, helvetica, sans-serif;
$color-primary: $orange;
$color-secondary: $blue;
$color-tertiary: $grey;Module-specific mixins, functions, and variables should be kept within the correct module’s partial file:
$tab-radius: 5px;
$tab-color: $grey;Overusing nested rules in Sass can cause a lot of issues, from complex code to over-specificity and too much reliance on the HTML structure of a page. These things can cause issues further down the line and potentially increase the need for the inclusion of !important, which should generally be avoided.
Here are some golden rules for nesting:
The concluding point I’ll make in this post is to keep things as simple as possible. The purpose of Sass is to write cleaner more manageable CSS. Before creating any new mixins, variables, or functions, ensure that their presence will enhance development and not overcomplicate things. All Sass features are useful when used in the correct situations and in moderation.
Creating an endless list of variables without clear usage, or a complex function that is difficult to understand for anyone other than the author is not the intention and will not aid development or produce DRY CSS.
That’s it for this list of Sass tips. You might not agree with all of these. Sass is still a fairly new technology so we’re continuing to learn new best practices with it. If you have your own suggestions, feel free to offer a comment.