What the heck is CSS?

So let’s explore the complicated world of web design and try to unmuddy the waters.

CSS Preprocessors:

CSS stands for Cascading Style Sheets, and is a style sheet language that describes how HTML elements will be displayed on screen in a markup language— for example, the background colour of the page, the font family, and the layout. CSS Preprocessors extend the basic functionalities and overcome the limitations of traditional CSS to create a more maintainable and efficient system.

Dumb it down — CSS is the language used to make web designs look fabulous. Preprocessors help us to write CSS faster and smarter, therefore making CSS even more fabulous. Fabulouser, if you will.

SASS:

SASS is a preprocessor that is compatible with all versions of CSS, and boasts many features and abilities as a CSS extension language. Created by Hampton Catlin, SASS allows developers to use features that don’t exist in CSS, thus making it possible to declare variables, define mixins, dictate selector inheritance, do nesting, looping, and many other efficient functions.

Dumb it down — SASS stands for Syntactically Awesome Style Sheets (I’m not even kidding). Essentially, SASS allows developers to look at the process of writing CSS and to make these variables, mixins and so forth (we’ll look into those more later), which otherwise would not be possible in CSS.

In other words, it is a way to simplify CSS workflow and to allow developers to improve, extend and maintain streamlined web designs.

LESS:

LESS is another CSS meta-language often used in place of SASS. It augments CSS with four main features: variables, mixins, nested inheritance, and operations. LESS was created in 2009 by Alexis Sellier as an alternative to SASS that uses the same syntax as CSS.

Dumb it down — LESS stands for Leaner CSS, and, like SASS, is a means of creating simpler, straight-forward workflow for style sheets.

So which is better? Depends on who you ask. LESS is easier to read from a non-technical background, while SASS has more developer options to utilise. Each web developer is likely to have an argument about whether SASS or LESS is better for different purposes, but it ostensibly comes down to a matter of preference and practise.

Features of Preprocessors:

Let’s have a closer look at some of those aforementioned nifty features:

Variables are a way to store information (like colours, font stacks, and other CSS values) that you want to reuse throughout your stylesheet, by using the $ symbol (for SASS) or @ symbol (for LESS). Which is easier to remember — ‘dark-blue’ or ‘#00008B’? Variables will allow you to assign values to a name and then use that name in your CSS.

Mixins allow you to make reusable chunks of CSS. Unlike variables, which hold only one value, mixins can hold multiple CSS declarations (or entire blocks of code) that you can reuse throughout the site.

Selector Inheritanceis a way of telling any selector to inherit all the styles and CSS properties from another selector.

Nesting allows you to obtain the same visual hierarchy in CSS as what you’d see in HTML, making your CSS easier to read, extend and maintain. It keeps the stylesheet organised by grouping related CSS into chunks.

Operations refer to division, multiplication, addition and subtraction, which helps you to set up declarations that may be tied to sizes or colours of other declarations.

Loops refer to code that needs to be repeated over and over with subtle changes. Think about looping through a series of colours to make CSS classes; for example, background__red, background__blue, etc.

Needless to say, it takes a lot of learning, a lot of practice, and a lot of talent to master the skills of CSS Preprocessors. Our team of web developers and designers can get the job done right. Let them tackle the inner workings of your website, and rest assured that your business’s site will be far more fabulouser than you ever imagined.