Welcome!

Java IoT Authors: Elizabeth White, Liz McMillan, Pat Romanski, Yeshim Deniz, Zakia Bouachraoui

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
@DevOpsSummit at Cloud Expo, taking place November 12-13 in New York City, NY, is co-located with 22nd international CloudEXPO | first international DXWorldEXPO 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 t...
DXWordEXPO New York 2018, colocated with CloudEXPO New York 2018 will be held November 11-13, 2018, in New York City and will bring together Cloud Computing, FinTech and Blockchain, Digital Transformation, Big Data, Internet of Things, DevOps, AI, Machine Learning and WebRTC to one location.
SYS-CON Events announced today that DatacenterDynamics has been named “Media Sponsor” of SYS-CON's 18th International Cloud Expo, which will take place on June 7–9, 2016, at the Javits Center in New York City, NY. DatacenterDynamics is a brand of DCD Group, a global B2B media and publishing company that develops products to help senior professionals in the world's most ICT dependent organizations make risk-based infrastructure and capacity decisions.
Cloud-enabled transformation has evolved from cost saving measure to business innovation strategy -- one that combines the cloud with cognitive capabilities to drive market disruption. Learn how you can achieve the insight and agility you need to gain a competitive advantage. Industry-acclaimed CTO and cloud expert, Shankar Kalyana presents. Only the most exceptional IBMers are appointed with the rare distinction of IBM Fellow, the highest technical honor in the company. Shankar has also receive...
Headquartered in Plainsboro, NJ, Synametrics Technologies has provided IT professionals and computer systems developers since 1997. Based on the success of their initial product offerings (WinSQL and DeltaCopy), the company continues to create and hone innovative products that help its customers get more from their computer applications, databases and infrastructure. To date, over one million users around the world have chosen Synametrics solutions to help power their accelerated business or per...
A valuable conference experience generates new contacts, sales leads, potential strategic partners and potential investors; helps gather competitive intelligence and even provides inspiration for new products and services. Conference Guru works with conference organizers to pass great deals to great conferences, helping you discover new conferences and increase your return on investment.
Business professionals no longer wonder if they'll migrate to the cloud; it's now a matter of when. The cloud environment has proved to be a major force in transitioning to an agile business model that enables quick decisions and fast implementation that solidify customer relationships. And when the cloud is combined with the power of cognitive computing, it drives innovation and transformation that achieves astounding competitive advantage.
Digital Transformation: Preparing Cloud & IoT Security for the Age of Artificial Intelligence. As automation and artificial intelligence (AI) power solution development and delivery, many businesses need to build backend cloud capabilities. Well-poised organizations, marketing smart devices with AI and BlockChain capabilities prepare to refine compliance and regulatory capabilities in 2018. Volumes of health, financial, technical and privacy data, along with tightening compliance requirements by...
DXWorldEXPO LLC announced today that ICOHOLDER named "Media Sponsor" of Miami Blockchain Event by FinTechEXPO. ICOHOLDER gives detailed information and help the community to invest in the trusty projects. Miami Blockchain Event by FinTechEXPO has opened its Call for Papers. The two-day event will present 20 top Blockchain experts. All speaking inquiries which covers the following information can be submitted by email to [email protected] Miami Blockchain Event by FinTechEXPOalso offers sp...
Digital Transformation is much more than a buzzword. The radical shift to digital mechanisms for almost every process is evident across all industries and verticals. This is often especially true in financial services, where the legacy environment is many times unable to keep up with the rapidly shifting demands of the consumer. The constant pressure to provide complete, omnichannel delivery of customer-facing solutions to meet both regulatory and customer demands is putting enormous pressure on...