Sass – the irresponsible loops

As Uncle Ben says

With great power comes great responsibility

Pre-processors are pretty popular these days for writing CSS, the enhancements they bring to CSS authoring is a great addition even if it’s just for variables (yes I know of CSS variables). There are also a ton of other features available in such tools.

One such great item is the ability to write loops, for those not familiar with loops in programming they provide the ability to write code that repeats the block of code within the loop multiple times based on a set of conditions. That’s a pretty basic explanation, and loops can provide great power for repeated tasks.

With that last point, “great power for repeated task” – With Sass this can also mean extra outputted CSS. Which can lead to increased CSS file size. In the grand scheme of things may not seem to be that big of a deal but this can lead to extra bandwidth being used by end users, less performant websites, etc.

Example with output within a loop

Here we have a two font variables that we are generating helper classes for using a simple loop. Seems simple enough. But when you look at the output. It may simple obvious on what it may be – we get an output for each loop item.

Loop with placeholder and @extend

By utilising a couple more of Sass feature (yes we write more Sass for less CSS) we can update the code to reduce the complied CSS. By using Sass placeholder selectors and the @extend at-rule we can update the loop to just extend a placeholder. By default the Sass placeholder selector will not output itself, you have to use the @extend at-rule to. For each time you use the @extend inside a selector it reuses the placeholder styles and adds the selector to the list as shown below


With any pre-processors or tool you are using to generate the items you are serving to you end users. You should, You must pay attention to the generated output. Something that may seem inconspicuous could turn out to be doing more than you expected.

HTML, CSS and netlify

Netlify is everything you need to build fast, modern websites: continuous deployment, serverless functions, and so much more.

I’ve been looking for a small project/excuse to use netlify for a little while now, and then something came along this week that seemed like the perfect place to be able at least try it without and fallout.

For some reason I’ve always thought netlify was for all the “modern” JAMStack style build – where you have a static site generator that needs to execute some build steps before it can be deployed. But as I found out this week I was pretty wrong.

I was building out some prototypes for something at work and wanted to get it online somewhere so I could show a few people. Normally I would use AWS S3 or upload to my own domain on a shared web host. There are many steps involved in either of those options that I wasn’t keen on having to set up or wait for DNS and so forth.

Here comes netlify – the prototype I was building was using no libraries or frameworks, using just HTML and CSS. I already had the prototype set up as a Git repository (I highly recommend always using source control, it’s a great “undo” tool and many other benefits).

With my Git repository setup (I am using a private repository for my prototype, I have made a demo one for this article), and my netlify account waiting. You just connect the two together and netlify will make a new build each time you commit. As I am committing directly to master the domain that netlify gives you for the project will always have the latest master commit deployed to it.


  1. Have a Git repository set up with you code (my example is here:
  2. Have a netlfiy account – You can sign up with oAuth and use your Github account if you like
  3. Choose “New site from Git”
  4. Continuous deployment – Choose Github, it will run through some steps and ask how you want to connect your account
  5. Choose the repository you want to use for this project/site
  6. Deploy settings – make sure the branch is your main branch – in my case I am using master. Don’t enter anything in the build section
  7.  Click “Deploy site”

You will then get taken to the overview screen for your site. First it will show as in progress, once it’s finished doing it’s thing you will have a link you can view your deployed code at. Netlify will auto generate a name for the site and a URL for you to view it at, for me it gave me the URL –

If you look at the code ( and the deployed site – You can see there is nothing specific to netlify – it’s deployed the repo as a static site, I have no build steps or any tools or frameworks in place. This allows me to quickly push my code up and have it available for others to view and interactive with. Just having an index.html in the root of the repository is enough.

For local development I am using npx to run a local server using the node module http-server.

netlify site overview

For each commit you make the branch you set as the main branch netlify will make a build for that commit. The URL for the site will always show you the most recent deploy.

You can view all the deploys that have happened in netlify and even view what that build looks like, Each build has it’s own URL you can view at – For example when I connected my repo it only had a readme file you can preview that build here – https://5d6a3e7e0c2e32cbcfc25ddf–

I then added some HTML and CSS files, after pushing to Github netlify picked up the commit and triggered another build. You can see my two builds in the deploys tab of the site.

netlify site deploys

Documenting your CSS with Styledown

Generating a styleguide for your CSS is something that can help other developers, and go a long way in reducing the confusion and possibility of someone reproducing the same styles. Ever jumped around a few projects over time and had to dive into all the CSS to find a style you thought was there, then found there was not one and you wrote it, or you may of even ended up duplicating some work that was brought up in a code review.

“Did you know we had a style already for that”

Generating a styleguide should not be a chore, and something you want your entire team to buy into. It should fit easily into your flow, not be too intimidating to other developers to start and continue with.

There are quite a lot of CSS styleguide generators around if you do a quick Google search, you will be greeted with many choices. I decided to go with styledown, as it looked to be the simplest and required very little in terms of getting up and running. Also the comments you needed to add to your CSS is very minimal, this suited what I was after. Another bonus for styledown was it was not Sass specific, it’s just CSS comments, you can even use markdown files if you so wish. Styledown is a node package, and is available on npm as styledown.

Documenting your CSS with Styledown is a simple as follows:

 * Buttons:

 * Button:
 * `button` - Button stylings for default sbittons on the sitee
 *     @example
 *     button Standard button

The first comment acts as the header, so in this case we are documenting our buttons. A file can contain multiple headers so you don’t have to worry too much about splitting your Sass up into lots of partials. We can then add comments throughout our CSS to give a description and example of the styles. The example part of the comment can be written as either Jade or HTML. The only required thing which can trip you up is the first line of the block you are documenting, in this case Button has to end with a semi-colon (:).

On top of adding comments to your CSS styledown allows you to have a config file, this file is markdown and lets you define what will be output in the head/body of the generated HTML file.

Generating the styleguide is as simple as running the following from your command line, assuming you have install the package globally.

styledown scss/**/*.scss > index.html

If you are using gulp as your build tool you there is a gulp-styledown module, makes things nicer if you want to build the styleguide for each change. I recently added the gulp-styledown module to a new project and have the style guide generating on save of any .scss file.

I am running styledown on my little CSS framework I use for personal projects, it’s more a big reset and normalize in one. You can see the source on Github, or view the styleguide at