This week was the seventh week of my internship at 9cv9 as part of the NUS Overseas College (NOC) Southeast Asia programme. Over the past few weeks, having worked with Sass more, I have learnt more about the different features of Sass by either writing it myself or reading through the already existing Sass code. Below are some of the more interesting and useful features of Sass.
The first interesting feature is the ability to reuse variables in the stylesheet. Creating variables is very simple, anything with a $ in front of it will be processed as a variable. This is very useful, especially when working with themes where the colors have to be kept consistent throughout the site.
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Another cool feature I would like to write about is Mixins in Sass. A mixin is a class containing methods that can be used by other classes without a need to inherit from it. In simpler terms, this allows you to add the mixin which implements a certain behaviour to other classes in order to add that behaviour to other classes. What I find really interesting is that SCSS supports the feature of mixins. With mixins, you can create groups of CSS declarations that can be reused throughout the site.
Mixins are created with the @mixin tag, a name and can have arguments passed into it as well by including it in the brackets: @mixin name(<arguments…>) { … }. It can then be used as a CSS declaration elsewhere by using the @include tag, the name and passing in the relevant arguments like this: @include <name>(<arguments…>). Here is an example of Mixins in action, borrowed from sass-lang’s official documentation:
Inheritance is also possible with Sass by first creating a placeholder with %, and then using the @extend tag to extend it in a selector. This allows a set of CSS properties to be shared from one selector to another, which is inline with the DRY (Don’t Repeat Yourself) principle. Here in the example below, we can make variants for error and success messages while reusing the properties from %message-shared.
%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.message {
@extend %message-shared;
}
.success {
@extend %message-shared;
border-color: green;
}
.error {
@extend %message-shared;
border-color: red;
}
Last but not least is the @import annotation. Sass extends CSS’s @import rule with the ability to import Sass and CSS stylesheets, providing access to mixins, functions, and variables and combining multiple stylesheets’ CSS together. Unlike plain CSS imports, which require the browser to make multiple HTTP requests as it renders your page, Sass imports are handled entirely during compilation. This is useful as it allows you to structure the Sass architecture using partials. Partials are files with underscores in front of them, such as _index.scss, which are only meant to be imported and not compiled on their own and are used to break the CSS up into more manageable blocks of code that are easier to maintain and develop. They can then all be added to the global scss file using @import, and can be done like this:
(Below is an actual code snippet from urbanCV’s global scss file)
// settings
@import ‘settings/_settings.global’;
@import ‘settings/_settings.colors’;
// tools
@import ‘tools/_tools.mixins’;
// generic
@import ‘generic/_generic.normalize’;
@import ‘generic/_generic.box-sizing’;
@import ‘generic/_generic.reset’;
// elements
@import ‘elements/_elements.commons’;
// objects
@import ‘objects/_objects.commons’;
@import ‘objects/_objects.typography’;
// Component
@import ‘components/index’;
// Utilities
@import ‘utilities/_utilities.commons’;
