DISCOVERY

August 2nd, 2021

Writing Less Stylesheets

Less

CSS

Sass

When it comes to CSS preprocessors (stylesheet languages that add features on top of CSS and transpile to CSS), in the past I've often used Sass. When I first started learning about CSS preprocessors, the two main choices were Sass and Less. The reason I decided to learn Sass instead of Less was due to its greater popularity and me trying to follow industry trends. At the time, Bootstrap had just released version 4, which switched its stylesheet language from Less to Sass1. In my mind, it didn't make sense for me to learn a preprocessor language that was being left in the dust.

Over time, I increasingly wished to learn the difference between Sass and Less. It was hard for me to tell if there were differences in the functionality of Sass or Less, or if Sass was picked as the favorite due to syntactical preferences and third-party library support. Last year I wrote two front-end application prototypes, graphql-react-prototype and apollo-client-server-prototype. Instead of using a stylesheet technology I already knew such as Sass or JSS, I decided to learn Less and use it as the stylesheet language for these prototypes.

Although I hoped to find interesting differences between the functionality of Less and Sass, in reality I found that both languages are very similar. While I'm sure engineers who work with both technologies extensively can find subtle differences between the two, from a high level they provide the same capabilities on top of CSS. Similar to Sass, Less has variables, mixins, conditionals, and loops. The main difference between the two is the syntax.

In some cases, Sass has superior syntax. As an example, for loops in Sass have better syntax than for loops in Less, with Sass having a built-in @for rule and Less requiring you to use a mixin2,3. In other cases, syntactical preferences are more subjective. For example, a variable with the name myVariable is written as $myVariable in Sass and @myVariable in Less. Neither is superior, it just comes down to personal taste.

So why did Sass gain more traction in the software engineering world than Less? Since both languages have similar functionality, to some extent I believe it is because most engineers prefer the syntax of Sass4. I also think third-party Sass libraries and frameworks, such as Compass, swayed engineers who enjoyed their out-of-the-box functionality. In my opinion, Sass does have slightly cleaner syntax, so I am more inclined to use it instead of Less in my projects.

s

Currently, my favorite approach for authoring stylesheets is JSS, a "CSS in JavaScript" library. You can read about it in my JSS and JSS in React articles.

Let's look at a few Less code samples from the prototype applications I've written. First, much like Sass, Less supports nested CSS rules. Here is an example from one of my React component stylesheets.

@import "../../vars"; .repository-count { grid-area: repoCount; height: 125px; h3, h2 { text-align: center; } h3 { font-size: 14px; } h2 { font-size: 42px; .hoverPurple() } .error { height: 100%; } }

Notice how h3, h2, and .error are nested inside .repository-count. This code snippet also shows how Less supports stylesheet imports. @import "../../vars" imports a var.less file, making all its variables and mixins available to the CSS rules. The vars.less file has the following content:

@darkTheme: #454443; @darkerTheme: darken(@darkTheme, 10%); @defaultFontColor: #e9eaed; @contrastPurple: #8a4cff; .hoverPurple() { color: lighten(@contrastPurple, 20%); transition: color ease 0.4s; &:hover { color: @contrastPurple; } }

The first four lines define four variables, each representing a color. These variables are used in CSS declarations elsewhere in the stylesheet code. For example, the @defaultFontColor variable is assigned to a color property with the color: @defaultFontColor; declaration. The second color variable, @darkerTheme: darken(@darkTheme, 10%), showcases one of the functions provided by Less called darken(). Similar to Sass, Less provides built-in functions which make it easier to write styles5. While CSS has some built-in functions, Sass and Less greatly improve the function offering6.

vars.less also defines a mixin named .hoverPurple. Mixins are a group of CSS declarations and nested CSS selectors which are "mixed in" with other CSS rules. For example, .hoverPurple is "mixed in" with the h2 CSS selector in the first code sample shown in this article.

Less has more features than those shown in this article. However, in my experience, variables, nested CSS rules, functions, and mixins are the ones most commonly used. Less has pretty good documentation online, so you can learn more on their website.

As far as CSS preprocessors are concerned, Less is a formidable option. Although I prefer the syntax of Sass, Less has nearly identical features, and configuring it with an application is easy. All the Less code I've written exists in my graphql-react-prototype and apollo-client-server-prototype repositories.