UI/Theme Frameworks and Components
| Ant Design | An enterprise-class UI design language and React-based implementation. |
| Balloon.css | Simple tooltips made of pure CSS |
| Bootflat | Open source Flat UI KIT based on Bootstrap |
| BootPress | A PHP Framework with a built in Blog and Flat File CMS |
| Bootstrap | Front-end framework for developing responsive, mobile first projects on the web |
| Bootswatch | Collection of free themes for Bootstrap |
| Cardinal | Small "mobile first" CSS framework for front-end developers who build responsive web applications |
| Flat UI Free | Theme and framework for Bootstrap |
| Ink | set of tools for quick development of web interfaces |
| Metro UI CSS | Set of styles to create a site with an interface similar to Windows 8 |
| Petal | A modern, light CSS UI framework developed at Shakr |
| Pre | CSS framework |
| prelude | Lightweight, responsive and extensible front-end framework |
| Schema | Light, responsive, and lean frontend UI framework |
| Semantic UI | UI component framework based around useful principles from natural language |
| Strapless | CSS boilerplate/framework for HTML elements, mixins library for patterns and color |
| UIkit | Lightweight and modular front-end framework for developing web interfaces |
| ngBoilerplate | An opinionated kickstarter for AngularJS projects |
| Wee | Lightweight front-end framework for logically building complex, responsive web projects |
Grid Systems
| Flexible Grid System | |
| adaptGrid | |
| Fluidable | |
| Golden Grid System | |
| Less Zen Grid | |
| Order.less | |
| responsibly | |
| Responsive Boilerplate | |
| Semantic.gs |
Mixin Libraries
| 3L | Mixins library |
| animate | Library of CSS3 keyframe animations |
| Clearless | Collection of mixins |
| Css3LessPlease | Conversion of css3please.com to Less mixins |
| CssEffects | Collection of CSS style effects |
| Cssowl | Mixin library |
| cube.less | Animated 3D cube using only CSS |
| est | Mixin library |
| Hexagon | Generate CSS hexagons with custom size and color |
| homeless | Mixin library |
| LESS Elements | Set of mixins |
| LESS Hat | Mixins library |
| lessley | A jasmine like testing suite written in pure Less |
| Lessmore | Mixins library. Cross-browser support for the CSS3 features and more |
| LESS-bidi | Set of mixins for creating bi-directional styling |
| LESS-Mix | Mixins library |
| media-query-to-type | Media Queries to Media Types with Less |
| More-Colors.less | Variables for easier color manipulation while you design in the browser |
| more-less | Mixin lib supporting Less 1.7 |
| More.less | Mixins, animations, shapes and more |
| more-or-less | for-loops and other functions + css3 mixins |
| normalize.less | Modularized famous normalize.css using Less |
| Oban | Collection of mixins |
| Preboot | Collection of variables and mixins. The precursor to Bootstrap |
| prelude-mixins | Collection of mixins |
| Shape.LESS | Collection of mixins for various shapes |
| tRRtoolbelt.less | Mixins and functions for common actions |
| Tuesday.less | CSS Animation mixins library |
| Less Style Library | A collection of variables and LESS namespaced mixins |
Editors and Editor Plugins
Edit the markdown source for "editors-and-plugins" Also see: GUIs for Less
Editors and IDEs
- Crunch 2! (built-in compiling, debugging, and searching across @imports)
- Mindscape Web Workbench (built-in support)
- NetBeans (built-in syntax highlighting)
- TextMate
- Vim
- Emacs
- jetBrains WebStorm and PhpStorm (built-in support)
- Brackets (built-in syntax highlighting, several extensions for compilation)
- CodeLobster (built-in syntax highlighting)
- KineticWing IDE (built-in support)
- nodeMirror (built-in support, built-in HTML/CSS/Less preview)
- HTML-Kit Tools (built-in support)
- Dreamweaver CC (built-in support)
Sublime Text 2 & 3
Eclipse
- Eclipse Less Plugin by Vincent Simonet
- Transpiler Plugin by Thomas Gossmann
Komodo Edit/IDE
- Komodo Less Compiler by Bob de Haas
Visual Studio
- CSS Is Less (Visual Studio)
- Web Essentials 2012 (Visual Studio 2012)
- Web Essentials 2013 (Visual Studio 2013)
- Web Tools 2013 (Visual Studio)
Dreamweaver
Notepad++ 6.x
- Less.js Syntax Highlighting User Defined Language by Raúl Salitrero
- Less.js Syntax Highlighting User Defined Language by azrafe7
- How to Install
Browser extensions
Less.js Plugins
Edit the markdown source for "plugins"
Available Less plugins. Find more at GitHub and NPM Registry
Postprocessor/Feature Plugins
| Autoprefixer | Add vendor prefixes |
| CSScomb | Beautify/format |
| clean-css | Compress/minify |
| CSSWring | Compress/minify |
| css-flip | Generate left-to-right (LTR) or right-to-left (RTL) CSS |
| functions | Write custom Less functions in Less itself |
| group-css-media-queries | Group CSS media queries |
| inline-urls | Convert url() to a call to data-uri() |
| lesshint | Lint your Less |
| lists | Lists/arrays manipulation (incl. loops) |
| pleeease | Postprocess using pleeease |
| rtl | Reverse from ltr to rtl |
| variables-output | Export top-level variables to a JSON file |
Preprocessors
| sass2less | Import and convert Sass/SCSS files into your Less code (incl. variables, mixins and more) |
Import Plugins
| bower-resolve | Import from a Bower package |
| glob | Globbing support in Less imports |
| npm-import | Import from npm packages |
| resolve-blocks | Going up a tree to find specified component |
Function Libraries
| advanced-color-functions | Functions to find more contrast colors |
| cubehelix | A cubehelix function |
| lists | Lists/arrays manipulation functions |
| urlencode | URL Encode function |
| util | A set of utility functions |
Framework Importers
| Bootstrap | Bootstrap |
| Cardinal | Cardinal |
| Flexbox Grid | Flexbox Grid |
| Flexible Grid System | Flexible Grid System |
| Ionic | Ionic |
| Lesshat | Lesshat |
| Skeleton | Skeleton |
Edit the markdown source for "guis-for-less" Tip: try out the different Less tools available for your platform to see which one meets your needs.
This page focuses on GUI compilers. For command line usage and tools see Command Line Usage.
Cross platform
Crunch 2!
The editor and compiler for awesome people.
Crunch 2 is a cross-platform (Windows, Mac, and Linux) editor with integrated compiling. If you work with large Less projects, you should definitely try it out, as you only need the free version for Less files. Available at: https://getcrunch.co/.
SimpLESS
SimpLess is a minimalistic Less compiler. Just drag, drop and compile.
One of the unique features of SimpLess is that it supports 'prefixing' your CSS by using http://prefixr.com.. SimpLess is built on the Titanium platform. Get more info: http://wearekiss.com/simpless
Koala
Koala is a cross-platform GUI application for compiling less, sass and coffeescript.
Features: cross platform, compile error notification supports and compile options supports.
Get more info: http://koala-app.com/
Prepros
Prepros is a tool to compile Less, Sass, Compass, Stylus, Jade and much more.
Get more info at https://prepros.io/
Specific platforms
Windows
WinLess
WinLess started out as a clone of Less.app, it takes a more feature-complete approach and has several settings. It also supports starting with command line arguments.
Get more info: http://winless.org
OS X
CodeKit
CodeKit is the successor to LESS.app, and supports Less among many other preprocessing languages, such as SASS, Jade, Markdown, and many more.
Get more info: http://incident57.com/codekit
LiveReload
CSS edits and image changes apply live. CoffeeScript, SASS, Less and others just work.
Get more info: http://livereload.com
Linux
Plessc
Plessc is a gui fronted made with PyQT.
Auto compile, log viewer, open the less file with the editor chosen, settings for compile the file. Get more info: https://github.com/Mte90/Plessc
Edit the markdown source for "online-less-compilers"
| less2css.org | Online Integrated Development Environment (IDE) that is hosted in a browser allowing users to edit and compile Less to CSS in real-time. |
| winless.org/online-less-compiler | This Online Less Compiler can help you to learn Less. You can go through the examples below or try your own Less code. |
| lesstester.com | Online compiler for Less CSS. |
| leafo.net/lessphp/editor | lessphp live demo. |
| estFiddle | Online Less compiler providing live demo for Less and est. Allowing users to switch among all versions of Less after 1.4.0 with optional est/Autoprefixer functionalities. |
| BeautifyTools Less Compiler | Online Less compiler with optional formatting and minification at BeautifyTools |
| Less WebCompiler | The most configurable Less web compiler on the internet, it allows to render the CSS output with your own Coding Standards! |
Online Web IDEs/Playgrounds with Less support
| CSSDeck Labs | CSSDeck Labs is a place where you can quickly create some experiments (or testcases) that involves HTML, CSS, JS code. |
| CodePen | CodePen is a playground for the front end side of the web. |
| Fiddle Salad | An online playground with an instantly ready coding environment. |
| JS Bin | JS Bin is a webapp specifically designed to help JavaScript and CSS folk test snippets of code. |
| jsFiddle | Online Web Editor |
Edit the markdown source for "third-party-compilers"
Node.js Compilers
- grunt-contrib-less
- assemble-less: Full-featured Grunt.js plugin for compiling Less files to CSS, with additional options for maintaining libraries of Less components and themes. For advanced users, this plugin allows you to define and manage Less "packages" or "bundles" using JSON, Lo-dash(underscore) templates (e.g.
<%= bootstrap.less %>), and node-glob / minimatch (e.g.'../src/**/*.less"). assemble-less also has a number of options including minifying CSS - gulp-less: Please note that this plugin discards
source-mapoptions, opting to instead using the gulp-sourcemaps library. - autoless: A Less files watcher, with dependency tracking (changes to imported files cause other files to be updated too) and growl notifications.
- Connect Middleware for Less: Connect Middleware for Less compiling
Other Technologies
Wro4j Runner CLI Download the wro4j-runner.jar file and run the following command:
java -jar wro4j-runner-1.5.0-jar-with-dependencies.jar --preProcessors lessCss
More details can be found here: Wro4j Runner CLI
CSS::LESSp
http://search.cpan.org/~drinchev/CSS-LESSp/
lessp.pl styles.less > styles.css
Windows Script Host
Note - the official Less node runs on windows, so we are not sure why you would use this.
Less.js for Windows with this usage:
cscript //nologo lessc.wsf input.less [output.css] [-compress]
or
lessc input.less [output.css] [-compress]
dotless
dotless for Windows can be run like this:
dotless.Compiler.exe [-switches] <inputfile> [outputfile]
Also see:
Edit the markdown source for "ports"
Java
- Lesscss (Runs less.js using Rhino, Nasshorn or node.js engine; 1.7.0 compliant)
- Lesscss gradle plugin (Gradle plugin based on Lesscss)
- Less Engine (Runs less.js in the Rhino JVM-based JavaScript interpreter)
- Less CSS Compiler for Java (Runs less.js in the Rhino JVM-based JavaScript interpreter)
- Less4j (Native Java implementation.)
- JLessC (Less compiler written completely in Java)
.Net
PHP
- lessphp
- BW Less CSS (WordPress Plugin)
- less.php
- ILess
Python
Ruby
Go
- Less.js In Go (Runs less.js inside embedded Javascript engine)
Know of another port that should be added to this list? Please let us know.
评论