Sass

It's all about style...

— by Calum on 24 March 2016 #development #digital #platform #style #website

Like Tweet +1 Share

We’re beginning to think about the redevelopment of the main SCVO website and will be blogging here on SCVO Labs over the next few months about some of the technical challenges and opportunities we’ve encountered along the way, as well as some of the processes we’ve followed.

In starting to discuss the new development with a wide range of people internally, it’s helpful to be able to visually illustrate how a new website could be presented so it can be discussed. This can be done by using modern web development technologies to create an example website (this is known as rapid prototyping). I’ll be exploring application technologies in later posts, but in this post will write about web page styling as we’ve been working recently on redesigning the interface for Good HQ. I’ll start by explaining how web pages are styled, what the limitations of the basic technology are, and what else is available to help. I’ll then explain the technologies we use and why they are helpful.

Why we need style

Web pages (hypertext) are constructed by taking plain text content and using HyperText Markup Language (HTML) to mark the parts of the text that are headings, the parts that are links to other pages, and the parts that need to be formatted differently, either within lines or as blocks. HTML gives you the fundamental building blocks to create web pages and applications, but doesn’t allow you to customise the way content is displayed.

Plain HTML doesn’t provide much styling aside from a number of different heading levels, emphasis (italic) and strong (bold), links and the ability to embed images. Basic HTML hasn’t changed much in two decades.

This is where Cascading Style Sheets (CSS) come in.

CSS allows content marked up in HTML to be styled as dramatically as you can imagine - fonts, colours, positioning - and more recently animations.

The first part of the acronym, cascading, describes the way styles are inherited based on where they are defined. CSS styles can be set in externally linked “style sheets” - files containing only CSS definitions that can be linked to from multiple pages, in the head section of an individual HTML document, and inline within individual HTML tags (elements).

Inheritance allows styles to be set globally via an external stylesheet or in the page head, but to be over-ridden as required by style definitions closer to the markup in question. Styles can also be nested, to allow styles only to be set when an element of HTML markup sits within a particular parent element (an HTML tag that acts as a “wrapper”).

On the face of it, this sounds straightforward - but with the nature of complex web applications and frameworks used today a single CSS stylesheet can become very lengthy and difficult to maintain.

Limitations of CSS

CSS isn’t a language as such, it doesn’t allow for iteration or variables, it simply allows you to define rules.

When those rules are complex and require nesting, each time a different sub-element needs a set of styles applied the whole chain of parent elements must be written out again as a new line of CSS - not the best for readability and maintenance, especially if someone else has to support the website in future.

What’s the solution?

There are a number of scripting languages that work via preprocessors to create CSS - you write style definitions in their own syntax (usually looking very much like CSS) but you can take advantage of scripting methods to make the styles easier to define. The code is then run through a preprocessor application which produces plain CSS for your website.

Two of the most popular CSS preprocessors are Sass and Less. We use Sass (Syntactically Awesome Stylesheets). If you’re interested in a comparison, see this article discussing the two. There are plenty of other preprocessors - see this article listing six of the most popular.

What can Sass do?

Key features of Sass are:

  • Variables
  • Nesting
  • Mixins (loops & arguments)
  • Selector inheritance

These features bring methods that will be familiar for programmers to website styling.

Using variables means that you don’t have to search through a stylesheet to change a colour or font size - they can be defined in a single variable. Mathematical operations can be performed on numeric variables to multiply, divide, add and subtract from defined values.

Groups of definitions which only relate to styles within a specific parent element can be nested, which follows the structure of the HTML code more closely and makes the definitions easier to read.

Loops and arguments can be set up to stop the definition duplication that is so common to CSS when defining styles for a set of similar elements.

Finally, selector inheritance allows for much more complex structures of inheritance of styles than is possible with plain CSS, also reducing the necessity to duplicate definitions.

Superpowers at SCVO

We use Sass to help rationalise not only our CSS definitions but also simplify our workflow for web development.

In the recent redesign of Good HQ we were able to very quickly try out new colours across the entire site by simply changing the values of a couple of Sass variables which are used for interface elements such as buttons, links, form fields, background colours, and borders.

By using a technology called LiveReload alongside a Sass compile-on-save plugin for my favourite IDE (Atom) whenever a change is made to the SCSS file (Sass code) and then saved, my browser automatically reloads the freshly generated CSS.

I have two screens on my development environment so this allows changes to be made to Sass such as a colour definition in a variable and when the file is saved the browser on the other screen automatically loads the freshly generated CSS styles and the new colour is implemented across the entire website.

These two small tools (Sass autocompile and LiveReload) streamline the working process which is useful when over the course of development the CSS may need to be updated many hundreds of times. Having near-instant feedback for the outcome of new style definitions makes it much easier to develop the appearance of a website.

Sass really does live up to the motto “CSS with superpowers”.