It is common knowledge that CSS has a very powerful syntax. However, if you are working on a smaller project or something that does not utilize every other feature of CSS, this very powerful syntax can become an extra baggage to deal with. To cope with such scenarios, we can make use of CSS preprocessors such as Less.
Built by Alexis Sellier, Less is a CSS preprocessor, which means it includes functionality that extends the functionality of CSS. Thus, if you need a preprocessor that makes CSS more extendable and customizable, and at the same time retains its light-weight fabric, Less is the way to go!
Advantages of Less
This is what Less brings to the table:
- Nested syntax
- Ability to define variables
- Ability to define mixins
- File joining
- Mathematical functions
- Operational functions
So, now that we have discussed the benefits of using Less, how do we get started with it? This post talks about everything you will need to get started with Less within minutes. Without wasting anymore time, let us check out the resources!
Getting Started with Less
First up, tools and resources to help us get started with Less.
- Getting started with Less.js →
These are the official Less docs. They give you an overview of Less, as well as download, installation and basic usage instructions. If you are new to Less, this is where you should begin!
- Get Into LESS: the Programmable Stylesheet Language →
If you need a quick tutorial about basic Less concepts such as variables, mixins and other operations, check out this piece on Tuts+.
- Learning LESS: A Comprehensive Introduction →
Another good resource for the newbie user, this article introduces you to Less, and talks about its usage and functionality. While the clarity of tone is not at par with that of Tuts+, it might make for good reading nonetheless.
- A Comprehensive Introduction to LESS →
This tutorial teaches you how to import and work with variables in Less.
- Do more in CSS with LESS →
This tutorial, from IBM.com, shows you how to use LESS to write readable and maintainable CSS for modern websites.
Eager to start coding in Less but unsure which editor to use? Check these out!
If you are an MS Windows user, WinLess is your best bet when it comes to Windows GUI for Less.js.
Less.app is a Less editor meant for Mac users.
SimpLESS is a Less compiler with a minimal and no-nonsense approach. It is available for multiple platforms, including Windows and Mac.
Crunch! lets you write your Less markup and crunch it into a CSS file, and thereafter link the crunched CSS file in your HTML. It requires Adobe AIR to work.
Koala is a GUI application that lets you compile markup in SASS, Compass, CoffeeScript and of course, Less. It is cross-platform and supports Linux, Windows and Mac.
Less Tools & Apps
Now that you have understood the basics of Less and already grabbed your favorite editor/compiler, it’s time to check out some additional tools and apps to help you do more with Less.js
Fishsticss lets you easily convert your existing markup to Less. You can choose whether or not to preserve comments in the markup.
CSS2Less is yet another online tool that lets you convert your existing CSS markup to Less within minutes.
LESS CSS is More (LESS Playground) does the opposite of Css2Less — it converts existing Less markup to usual CSS.
WP-LESS is a plugin that lets you implement Less in your WordPress themes. You can simply focus on the code, and the plugin will handle mundane tasks such as cache management and user delivery all by itself. You can also bundle the plugin with your theme without worrying about conflicts.
Essential Less Mixins
Here are some of the most popular and essential Less Mixins that you should take a look at!
LESS Hat Mixin Library →
LESS Hat is a Less mixin library that offers a wide range of features, such as SVG gradients for IE9, keyframes and unlimited gradients and transitions.
Preboot is a collection of Less utilities, including mixins such as transitions and gradients.
LESS Elements →
LESS Elements is a collection of basic Less mixins that focus on cross-browser compatibility.
Less CSS Toolkit is a collection of reusable Less mixins for animations, transitions, gradients and other effects.
Clearless is a simple library of reusable and flexible Less mixins.
LESS DSS offers a collection of mixins such as backgrounds, borders, 2D/3D transforms, transitions, etc.
CSS3 Mixins is a collection of mixins for STYL, SASS and Less.
Shape.LESS offers Less mixins for various geometric shapes.
Sublime Text Less Extensions
Following are some of the most popular Sublime Text Extensions for Less users.
- LESS Syntax Highlighting →
LESS Syntax Highlighting provides syntax highlighting (well, doh!) for Less files, alongside snippets and completions.
- CSS Less(ish) →
CSS Less(ish) lets you use variables and nesting in your CSS files.
- LESS-Build →
LESS-Build provides two build systems for Less files — minified and non-minified.
- Less2Css →
Less2Css is a Sublime Text 2 plugin that automatically compiles Less files to CSS, as soon as you hit save.
Less-Powered Web Frameworks
This section enlists some of the popular web frameworks powered by Less.
Emerald is a responsive grid system that is built with Less and features a fixed width grid.
Frameless allows you to build column-adoptable fixed width grids and is especially useful for those who prefer responsive design but do not wish to work with fluid width layouts.
Satus Framework →
Satus Framework is a minimal and mobile-first responsive framework based on HTML5 Boilerplate and Less. It includes Less mixins for semantic grid support.
Grdlss is a Less framework that lets you build your own grids within minutes.
Responsable is a clean, minimal and responsive framework with nested columns, baseline grid support and in-built typographic styles.
Schema is a light and responsive UI framework meant for frontend developers.
Fraction.less is a web development boilerplate with custom workflows. It is well integrated with Less.js but you can also choose to use plain CSS if you so desire.
The Semantic Grid System lets you work with page layouts. You can specify column and gutter widths and several other relevant details. It runs on Less, SASS and Stylus.
typebase.css is a minimal and customizable typography stylesheet. It supports both Less and SASS.
Less+ Framework lets you build websites that adapt their content depending on the screen resolution.
Bootstrap is an extremely popular Less-powered front-end framework meant for developing responsive and mobile-first projects.
FoundationLess extends the ZURB Foundation framework using Less, to include additional features such as a global color palette, etc.
960-Less combines the 960 Grid System with Less.js in order to make use of Less features such as mixins and variables.
FatUI is a UI framework based in Less that provides pretty forms, buttons and other input fields.
Less Grid is a light-weight framework that offers a cross-browser platform for building responsive websites.
Less-Powered WordPress Frameworks
Lastly, we have some of the most popular Less.js powered WordPress frameworks for you.
Bones is an HTML5, Less.js (or Sass) powered mobile-first starter theme for rapid WP development.
JBST is a theme framework for creating child themes for WordPress. It is built on the top of Bootstrap 3 and is full customizable with LESS.
Not a framework as such, the Less is a super minimal Less.js powered WordPress theme (both frontend and backend). It only uses the minimum requirements that WordPress needs, a stylesheet, screenshot and the index page. A great starting point for development.
That brings us to the end of this collection of helpful Less resources. Share your views in the comments below!
- Why You Should Explain Design Decisions to Your Clients
- Taking a Look at Brand-Related Splash Screens in Web Design
- Beyond Glitched: Using Distorted Images in Web Design
- 8 Fantastic Examples of Variable Fonts in Action
- Fun Ways to Help You Rediscover the Joys of Web Design
- The Pros and Cons of Building Websites with Third-Party Products
- 30 Essential Free Plugins for Sketch App
- My Approach to On-Page SEO in 2019