Welcome!

Mobile IoT Authors: Derek Weeks, Mark Herring, Pat Romanski, Elizabeth White, Liz McMillan

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.

@ThingsExpo Stories
In his Opening Keynote at 21st Cloud Expo, John Considine, General Manager of IBM Cloud Infrastructure, led attendees through the exciting evolution of the cloud. He looked at this major disruption from the perspective of technology, business models, and what this means for enterprises of all sizes. John Considine is General Manager of Cloud Infrastructure Services at IBM. In that role he is responsible for leading IBM’s public cloud infrastructure including strategy, development, and offering m...
With tough new regulations coming to Europe on data privacy in May 2018, Calligo will explain why in reality the effect is global and transforms how you consider critical data. EU GDPR fundamentally rewrites the rules for cloud, Big Data and IoT. In his session at 21st Cloud Expo, Adam Ryan, Vice President and General Manager EMEA at Calligo, examined the regulations and provided insight on how it affects technology, challenges the established rules and will usher in new levels of diligence arou...
The 22nd International Cloud Expo | 1st DXWorld Expo has announced that its Call for Papers is open. Cloud Expo | DXWorld Expo, to be held June 5-7, 2018, at the Javits Center in New York, NY, brings together Cloud Computing, Digital Transformation, Big Data, Internet of Things, DevOps, Machine Learning and WebRTC to one location. With cloud computing driving a higher percentage of enterprise IT budgets every year, it becomes increasingly important to plant your flag in this fast-expanding busin...
Smart cities have the potential to change our lives at so many levels for citizens: less pollution, reduced parking obstacles, better health, education and more energy savings. Real-time data streaming and the Internet of Things (IoT) possess the power to turn this vision into a reality. However, most organizations today are building their data infrastructure to focus solely on addressing immediate business needs vs. a platform capable of quickly adapting emerging technologies to address future ...
No hype cycles or predictions of a gazillion things here. IoT is here. You get it. You know your business and have great ideas for a business transformation strategy. What comes next? Time to make it happen. In his session at @ThingsExpo, Jay Mason, an Associate Partner of Analytics, IoT & Cybersecurity at M&S Consulting, presented a step-by-step plan to develop your technology implementation strategy. He also discussed the evaluation of communication standards and IoT messaging protocols, data...
Nordstrom is transforming the way that they do business and the cloud is the key to enabling speed and hyper personalized customer experiences. In his session at 21st Cloud Expo, Ken Schow, VP of Engineering at Nordstrom, discussed some of the key learnings and common pitfalls of large enterprises moving to the cloud. This includes strategies around choosing a cloud provider(s), architecture, and lessons learned. In addition, he covered some of the best practices for structured team migration an...
In his session at 21st Cloud Expo, Raju Shreewastava, founder of Big Data Trunk, provided a fun and simple way to introduce Machine Leaning to anyone and everyone. He solved a machine learning problem and demonstrated an easy way to be able to do machine learning without even coding. Raju Shreewastava is the founder of Big Data Trunk (www.BigDataTrunk.com), a Big Data Training and consulting firm with offices in the United States. He previously led the data warehouse/business intelligence and B...
Recently, REAN Cloud built a digital concierge for a North Carolina hospital that had observed that most patient call button questions were repetitive. In addition, the paper-based process used to measure patient health metrics was laborious, not in real-time and sometimes error-prone. In their session at 21st Cloud Expo, Sean Finnerty, Executive Director, Practice Lead, Health Care & Life Science at REAN Cloud, and Dr. S.P.T. Krishnan, Principal Architect at REAN Cloud, discussed how they built...
22nd International Cloud Expo, taking place June 5-7, 2018, at the Javits Center in New York City, NY, and co-located with the 1st DXWorld Expo will feature technical sessions from a rock star conference faculty and the leading industry players in the world. Cloud computing is now being embraced by a majority of enterprises of all sizes. Yesterday's debate about public vs. private has transformed into the reality of hybrid cloud: a recent survey shows that 74% of enterprises have a hybrid cloud ...
22nd International Cloud Expo, taking place June 5-7, 2018, at the Javits Center in New York City, NY, and co-located with the 1st DXWorld Expo will feature technical sessions from a rock star conference faculty and the leading industry players in the world. Cloud computing is now being embraced by a majority of enterprises of all sizes. Yesterday's debate about public vs. private has transformed into the reality of hybrid cloud: a recent survey shows that 74% of enterprises have a hybrid cloud ...
DevOps at Cloud Expo – being held June 5-7, 2018, at the Javits Center in New York, NY – announces that its Call for Papers is open. Born out of proven success in agile development, cloud computing, and process automation, DevOps is a macro trend you cannot afford to miss. From showcase success stories from early adopters and web-scale businesses, DevOps is expanding to organizations of all sizes, including the world's largest enterprises – and delivering real results. Among the proven benefits,...
@DevOpsSummit at Cloud Expo, taking place June 5-7, 2018, at the Javits Center in New York City, NY, is co-located with 22nd Cloud Expo | 1st DXWorld Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The widespread success of cloud computing is driving the DevOps revolution in enterprise IT. Now as never before, development teams must communicate and collaborate in a dynamic, 24/7/365 environment. There is no time to wait...
Cloud Expo | DXWorld Expo have announced the conference tracks for Cloud Expo 2018. Cloud Expo will be held June 5-7, 2018, at the Javits Center in New York City, and November 6-8, 2018, at the Santa Clara Convention Center, Santa Clara, CA. Digital Transformation (DX) is a major focus with the introduction of DX Expo within the program. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive ov...
SYS-CON Events announced today that T-Mobile exhibited at SYS-CON's 20th International Cloud Expo®, which will take place on June 6-8, 2017, at the Javits Center in New York City, NY. As America's Un-carrier, T-Mobile US, Inc., is redefining the way consumers and businesses buy wireless services through leading product and service innovation. The Company's advanced nationwide 4G LTE network delivers outstanding wireless experiences to 67.4 million customers who are unwilling to compromise on qua...
SYS-CON Events announced today that Cedexis will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Cedexis is the leader in data-driven enterprise global traffic management. Whether optimizing traffic through datacenters, clouds, CDNs, or any combination, Cedexis solutions drive quality and cost-effectiveness. For more information, please visit https://www.cedexis.com.
SYS-CON Events announced today that Google Cloud has been named “Keynote Sponsor” of SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Companies come to Google Cloud to transform their businesses. Google Cloud’s comprehensive portfolio – from infrastructure to apps to devices – helps enterprises innovate faster, scale smarter, stay secure, and do more with data than ever before.
SYS-CON Events announced today that Vivint to exhibit at SYS-CON's 21st Cloud Expo, which will take place on October 31 through November 2nd 2017 at the Santa Clara Convention Center in Santa Clara, California. As a leading smart home technology provider, Vivint offers home security, energy management, home automation, local cloud storage, and high-speed Internet solutions to more than one million customers throughout the United States and Canada. The end result is a smart home solution that sav...
SYS-CON Events announced today that Opsani will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Opsani is the leading provider of deployment automation systems for running and scaling traditional enterprise applications on container infrastructure.
SYS-CON Events announced today that Nirmata will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Nirmata provides a comprehensive platform, for deploying, operating, and optimizing containerized applications across clouds, powered by Kubernetes. Nirmata empowers enterprise DevOps teams by fully automating the complex operations and management of application containers and its underlying ...
SYS-CON Events announced today that Opsani to exhibit at SYS-CON's 21st Cloud Expo, which will take place on October 31 through November 2nd 2017 at the Santa Clara Convention Center in Santa Clara, California. Opsani is creating the next generation of automated continuous deployment tools designed specifically for containers. How is continuous deployment different from continuous integration and continuous delivery? CI/CD tools provide build and test. Continuous Deployment is the means by which...