Gecko v7 Gecko v7
  • +44 (0) 131 240 3390
  • +44 (0) 131 240 3390
  • Gecko Agency
    Design
    Brand Strategy
    Web Design
    Development
    Umbraco
    Custom API Integrations
    Custom Web Development
    Virtual Website Planning
    Digital Marketing
    Search Engine Optimisation
    Paid Search Marketing
    Content Marketing
    Social Media Marketing
    Support
    Support Packages
    Blog
    Case Studies
    About Us
    Careers
    Contact
    Edinburgh

    CSS Preprocessors: An Introduction

    11th April 2018

    When Cascading Style Sheets (CSS) first entered the scene, it was very much an enhancement, or add-on, to your site.

    Sites sprung up espousing the virtues of separating content and presentation and it wasn't long, relatively speaking before it became the de facto way of getting your site to look good.

    As CSS became more of a browser standard, and we were able to use more of its potential, site CSS files started to become a bit unwieldy.

    Early methods of dealing with this were to have separate files for different areas but that simply swapped one issue for another, i.e. many server requests which was bad for optimisation.

    Enter the CSS Preprocessors; Sass and LESS being the main two. Originally we had Sass which at the time used indented syntax to separate out its code blocks, and as a result, the take up wasn't as great as it could have been. LESS was inspired by SASS but was leaner and looked a lot more like the CSS people were familiar with, this IMHO, helped its take up. Not to be outdone, Sass evolved to have a similar syntax called SCSS (Sassy CSS) and these days the differences are, for the most part, personal choice.

    So what should I choose Sass or LESS?

    To be fair, both do a great job and if you have a free choice look at their documentation, give each a try and go with works for you.

    However, it is not always that easy to have a free choice. You might not be able to call the shots on a project either down to your role or some other factor like the framework you are using already uses one of them. Also, how you compile the source files might have an impact on your choice, we use Gulp and can compile both, so for us, it’s not really an issue and for the day to day tasks you really should be comfortable with Sass and LESS.

    So what are the advantages of using a CSS Preprocessor?

    When you first get started, the 3 biggest advantages are:

    • Separate source files
    • Variables
    • Nested CSS selectors

    1. Separate source files

    The ability to have lots of little files that do a specific presentation task is great from a development perspective. Maintenance of a site becomes that much easier when can split up the presentation into distinct parts that then get compiled together to become the whole site. The downside to this, of course, is if you don't have the original source files then while you can edit the compiled CSS its not ideal and can take a lot longer to do simple changes. So, if you inherit a site from someone else, always make sure to ask if there are any source files you need for the CSS.

    If you are looking for a business case for changing to a CSS Preprocessor then this is the one - time is money - and you will save a lot of time, long-term, by having the files separated out like this.

    2. Variables

    Continuing with the basics, another great help in the time saving is the ability to use variables instead of hard-coded values, some might argue this is what it’s all about and all the rest is just gravy. No longer do you have to do search and replace and hope you get all the correct terms. Instead, you have a single file with all your variables. These variables are then available to be used, assuming you have set up your structure correctly, in all your other source files. So, when your designer asks for a colour change over half a dozen buttons it’s no longer a huge deal to make sure you get them all.

    3. Nested CSS selectors

    While you don't want your CSS to be too specific unless it needs to so it overrides an existing rule, nested CSS becomes a lot easier to read and as a result, it's a lot easier to manage. You don't even need to restrict yourself to full CSS selectors for nesting. If a number of selectors have the same starting string and state a different suffix then you can start with the common string and nest the suffixes in as required.

    Other considerations

    This has been a very simple introduction to get you thinking about CSS Preprocessors. We have by no means touched on all the benefits of them, that will be for later posts, but even if all you do are the 3 basic points we mentioned above then your foray into the world of CSS Preprocessors will be worth it in the time you save from project to project. Once you get the basics under your belt you can start to look at more advanced features.

    - John

     

    11th April 2018 Share This:
    ...
    Author
    John Logan
    Developer
    John is one of our talented front-end developers, whose passion for Umbraco sites is fueled not just by caffeine, but quite a lot of sugar! He's been a valuable member of the Gecko team since 2011, using his creativity and technical skills to help countless clients achieve their web presence goals. When he's not busy building amazing websites, John channels his creativity into his love for DIY projects and his woodworking skills are legendary!
    @Twitter
    Read more from Gecko
    The 5 Best Creative Websites We Love and Why
    Threads: A New Frontier for Business Communication or a Red Herring?
    Umbraco 8 End-of-Life
    Follow Us:

    Gecko Agency (Edinburgh)

    hello@wearegecko.co.uk
    t: 0131 240 3390

    t: 0131 240 3390

    Head Office

    Orchard Brae House
    30 Queensferry Road
    Edinburgh
    EH4 2HS

    Gecko Agency Ltd | Copyright © 2025

    • |GDPR
    • |Privacy Policy
    • |Cookie Policy