Welcome!

Mobile IoT Authors: Jason Bloomberg, Zakia Bouachraoui, Kevin Benedict, Pat Romanski, Yeshim Deniz

Related Topics: @DevOpsSummit, Java IoT, Mobile IoT, Linux Containers, Containers Expo Blog, Agile Computing

@DevOpsSummit: Blog Post

Which CSS Preprocessor Should You Choose? | @DevOpsSummit [#DevOps]

We will focus on the two most commonly used in the industry: Sass and LESS

Which CSS Preprocessor Should You Choose?

With the growing number of CSS Preprocessors like LESSSassTurbineStylus andSwith CSS to name a few, it's hard to decide which to choose for your project, and which will provide the best CSS authoring.

Rather than focus on evaluating every CSS Preprocessor (that would simply take too long), we will focus on the two most commonly used in the industry:

Sass and LESS. We will provide a comparison on important deciding factors, like installation, features, and similarities & differences, to help you decide which is the best choice.

choosing a css preprocessor

Before we begin comparing... If you don't know much about CSS Preprocessors, I would recommend you first read this article: Ten Reasons You Should be Using a CSS Preprocessor to understand how they can make your life easier.

Which CSS Preprocessor should you choose

Installation
Let's start with the first fundamental step, installation. Both Sass and LESS are built upon different platforms, Sass runs on Ruby while LESS uses a JavaScript library.

Installing Sass: Sass needs Ruby installed to work. This comes pre-installed with Mac, but in Windows you'll need to install before you can start playing with Sass. Further, Sass needs to be installed through the Terminal or Command Prompt.

There are several GUI applications you can use in place of the terminal, like (Scout,compass.app)

To install Sass on the command line, run:

$ gem install sass

Or with npm (node package manger):

$ npm install sass

To run Sass from the command line:

$ sass input.scss output.css

Installing LESS: LESS is built on JavaScript, so installation is as easy as linking JavaScript library to your HTML document. There also are a few GUI applications to help compile LESS to CSS, most of which are free and perform very well (e.g. CRUNCHWinLess andLESS.app).

Alternatively, an easy way to install LESS on the server is with npm (node package manager), like this:

$ npm install -g less

To start the compiler from the command line:

$ lessc styles.less

Then, to run LESS from the command line, you can run:

$ lessc styles.less > styles.css

For a more comprehensive list of tools to compile LESS and Sass, look here, it covers a mix of both free and paid apps. There is a handy list of tools to make life a little easier when starting out with LESS or Sass, (25 Essential Sass and Less Tools).

Features
Here are the main features of Sass and LESS:

Sass

Less

VariablesExtend

 

Mixins

Nesting

Import

Operations

Functions

Loops

Partials

Compass

 

VariablesExtend

 

Mixins

Nesting

Import

Operations

Functions

Loops

Merge

Similarities and Differences
You can see from the features list above, the difference between Sass and LESS is not huge. Both offer a good range of options to help you write smart and efficient code.

The major differences between LESS and Sass are Variables, Inheritance, Looping Logic and Compass.

Let me explain further.

Variables
Variables are used to pre-assigned values (like colors, margins, padding, etc.) anywhere in your stylesheet. This enables quicker access, but is repetitive to implement, and more importantly, update.

If you use a variable you only have to update in one place.

In LESS, variable names are prefaced with the @ symbol. In Sass, variable names are prefaced with the $ symbol. In both, the value is closed with a semicolon, which is typical for CSS.

Example:

@myLessColor: #ff0087;p {color: @myLessColor;}__________________________$mySassColor: #ff0087;p {color: $mySassColor;}

The only issue in this example is Less's use of the @ symbol.

The @ symbol already has assigned meaning in standard CSS, whereas the $ does not.

This can be confusing for beginners unfamiliar with the standards of the language yet.

Mixins, Inheritance & Extend
Mixins in Sass and LESS are defined a bit differently. In Sass we use the @mixin directive while in LESS we define it with class selector.

Here is an example:

Sass/Scss

@mixin border-radius ($values) {border-radius: $values;
}
nav {
margin: 40px auto 0;
width: 760px;
height: 35px;
@include border-radius(5px);
}

LESS

.border(@radius) {
border-radius: @radius;
}
nav {
margin: 40px auto 0;
width: 760px;
height: 35px;
.border(5px);
}

Mixins in Sass and LESS are used to include properties from one ruleset to another. In Sass, this method is taken further with Selector Inheritance. The concept is identical, but instead of copying the whole property, Sass will extend or group selectors that have identical properties and values using the @extend directive.

Sass/Scss

.module {
padding: 10px;
h3 {
color: red;
}
}.news {
@extend .module;
}

Sass/Scss

.module {
padding: 10px;
h3 {
color: red;
}
}.news {
@extend .module;
}

Logic Statements
In LESS you can write a basic logic statement using a ‘guarded mixin' like this:

.boxcolor(@colour) when (lightness(@colour) > 40%) {
color: @colour;
background-color: #000;
.box-shadow(0 3px 4px #ddd);
}
.boxcolor(@colour) when (lightness(@colour) < 41%) {
color: @colour;
background-color: #fff;
.box-shadow(0 1px 1px rgba(0,0,0,0.3));
}

The equivalent in Sass, using if statements would be:

@mixin boxcolor($colour) {
color: $colour;
@if(lightness($colour) > 40%) {
background-color: #000;
@include box-shadow(0 3px 4px #ddd);
}
@if(lightness($colour) <= 40%) {
background-color: #fff;
@include box-shadow(0 1px 1px rgba(#000,0.3));
}
}

Compass
Both Sass and LESS have extensions for faster and easier web development.

Sass: has Compass on it's side, which contains a plethora of Mixins to write CSS3 syntax in less time. Compass extends way beyond just CSS3 Mixins. It has added other useful features like HelpersLayoutTypographyReset and even Sprite Images. It also has config.rb file where you can control the CSS output and other utilities.

It is an extremely useful all-in-one package for web development with Sass.

LESS: LESS also has several extensions, but unlike Compass (which has everything in one place), they are separated. Each extension is built by different group of developers. This won't cause problems for seasoned users, but could be troublesome for those starting out.

Here are a few LESS extensions that you might need to include in your project:

Conclusion
The CSS Preprocessor you choose - Less or Sass - is determined by personal preference.

Depending on the nuances most important to your project, choose the preprocessor that seems best. My personal choice is Sass, simply because of compass and the @ symbol in LESS always bother me. But, I would highly recommend you try both out and decide for yourself.

You can download Less here and download Sass here.

Also, for a more in-depth comparison of the 2 languages, here is some further suggested reading.

More Stories By Trevor Parsons

Trevor Parsons is Chief Scientist and Co-founder of Logentries. Trevor has over 10 years experience in enterprise software and, in particular, has specialized in developing enterprise monitoring and performance tools for distributed systems. He is also a research fellow at the Performance Engineering Lab Research Group and was formerly a Scientist at the IBM Center for Advanced Studies. Trevor holds a PhD from University College Dublin, Ireland.

IoT & Smart Cities Stories
While the focus and objectives of IoT initiatives are many and diverse, they all share a few common attributes, and one of those is the network. Commonly, that network includes the Internet, over which there isn't any real control for performance and availability. Or is there? The current state of the art for Big Data analytics, as applied to network telemetry, offers new opportunities for improving and assuring operational integrity. In his session at @ThingsExpo, Jim Frey, Vice President of S...
In his keynote at 18th Cloud Expo, Andrew Keys, Co-Founder of ConsenSys Enterprise, provided an overview of the evolution of the Internet and the Database and the future of their combination – the Blockchain. Andrew Keys is Co-Founder of ConsenSys Enterprise. He comes to ConsenSys Enterprise with capital markets, technology and entrepreneurial experience. Previously, he worked for UBS investment bank in equities analysis. Later, he was responsible for the creation and distribution of life settl...
@CloudEXPO and @ExpoDX, two of the most influential technology events in the world, have hosted hundreds of sponsors and exhibitors since our launch 10 years ago. @CloudEXPO and @ExpoDX New York and Silicon Valley provide a full year of face-to-face marketing opportunities for your company. Each sponsorship and exhibit package comes with pre and post-show marketing programs. By sponsoring and exhibiting in New York and Silicon Valley, you reach a full complement of decision makers and buyers in ...
Two weeks ago (November 3-5), I attended the Cloud Expo Silicon Valley as a speaker, where I presented on the security and privacy due diligence requirements for cloud solutions. Cloud security is a topical issue for every CIO, CISO, and technology buyer. Decision-makers are always looking for insights on how to mitigate the security risks of implementing and using cloud solutions. Based on the presentation topics covered at the conference, as well as the general discussions heard between sessio...
The Internet of Things is clearly many things: data collection and analytics, wearables, Smart Grids and Smart Cities, the Industrial Internet, and more. Cool platforms like Arduino, Raspberry Pi, Intel's Galileo and Edison, and a diverse world of sensors are making the IoT a great toy box for developers in all these areas. In this Power Panel at @ThingsExpo, moderated by Conference Chair Roger Strukhoff, panelists discussed what things are the most important, which will have the most profound e...
The Jevons Paradox suggests that when technological advances increase efficiency of a resource, it results in an overall increase in consumption. Writing on the increased use of coal as a result of technological improvements, 19th-century economist William Stanley Jevons found that these improvements led to the development of new ways to utilize coal. In his session at 19th Cloud Expo, Mark Thiele, Chief Strategy Officer for Apcera, compared the Jevons Paradox to modern-day enterprise IT, examin...
Rodrigo Coutinho is part of OutSystems' founders' team and currently the Head of Product Design. He provides a cross-functional role where he supports Product Management in defining the positioning and direction of the Agile Platform, while at the same time promoting model-based development and new techniques to deliver applications in the cloud.
There are many examples of disruption in consumer space – Uber disrupting the cab industry, Airbnb disrupting the hospitality industry and so on; but have you wondered who is disrupting support and operations? AISERA helps make businesses and customers successful by offering consumer-like user experience for support and operations. We have built the world’s first AI-driven IT / HR / Cloud / Customer Support and Operations solution.
LogRocket helps product teams develop better experiences for users by recording videos of user sessions with logs and network data. It identifies UX problems and reveals the root cause of every bug. LogRocket presents impactful errors on a website, and how to reproduce it. With LogRocket, users can replay problems.
Data Theorem is a leading provider of modern application security. Its core mission is to analyze and secure any modern application anytime, anywhere. The Data Theorem Analyzer Engine continuously scans APIs and mobile applications in search of security flaws and data privacy gaps. Data Theorem products help organizations build safer applications that maximize data security and brand protection. The company has detected more than 300 million application eavesdropping incidents and currently secu...