542 lines
25 KiB
HTML
542 lines
25 KiB
HTML
<h1 id="awesome-less-awesome">Awesome Less <a
|
||
href="https://github.com/sindresorhus/awesome"><img
|
||
src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg"
|
||
alt="Awesome" /></a></h1>
|
||
<p><a
|
||
href="http://lesscss.org/"><img src="https://cdn.rawgit.com/LucasBassetti/awesome-less/14437854/less-logo.svg" align="right" height="80"></a></p>
|
||
<blockquote>
|
||
<p>Curated list of awesome Less frameworks, libraries, style guides,
|
||
articles, and resources. The main idea is that everyone can contribute
|
||
here, so we can center all the informations about Less and keep
|
||
up-to-date.</p>
|
||
</blockquote>
|
||
<h2 id="contents">Contents</h2>
|
||
<ul>
|
||
<li><a href="#about">About</a></li>
|
||
<li><a href="#getting-started">Getting Started</a></li>
|
||
<li><a href="#uitheme-frameworks-and-components">UI/Theme Frameworks and
|
||
Components</a></li>
|
||
<li><a href="#libraries-and-mixins">Libraries and Mixins</a>
|
||
<ul>
|
||
<li><a href="#grid">Grid</a></li>
|
||
<li><a href="#media-queries">Media Queries</a></li>
|
||
<li><a href="#color">Color</a></li>
|
||
<li><a href="#animation">Animation</a></li>
|
||
<li><a href="#miscellaneous">Miscellaneous</a></li>
|
||
</ul></li>
|
||
<li><a href="#style-guides">Style Guides</a></li>
|
||
<li><a href="#ports-of-less">Ports of Less</a>
|
||
<ul>
|
||
<li><a href="#java">Java</a></li>
|
||
<li><a href="#net">.Net</a></li>
|
||
<li><a href="#php">PHP</a></li>
|
||
<li><a href="#python">Python</a></li>
|
||
<li><a href="#ruby">Ruby</a></li>
|
||
<li><a href="#go">Go</a></li>
|
||
</ul></li>
|
||
<li><a href="#guis-editors-and-plugins">GUIs, Editors and
|
||
Plugins</a></li>
|
||
<li><a href="#online-less-compilers">Online Less Compilers</a></li>
|
||
<li><a href="#online-web-idesplaygrounds-with-less-support">Online Web
|
||
IDEs/Playgrounds with Less support</a></li>
|
||
<li><a href="#translations">Translations</a></li>
|
||
<li><a href="#articles">Articles</a></li>
|
||
<li><a href="#books">Books</a></li>
|
||
<li><a href="#videos">Videos</a></li>
|
||
<li><a href="#experiments">Experiments</a></li>
|
||
<li><a href="#community">Community</a></li>
|
||
<li><a href="#contributing">Contributing</a></li>
|
||
<li><a href="#license">License</a></li>
|
||
</ul>
|
||
<h2 id="about">About</h2>
|
||
<p>Less is a open source dynamic style sheet language that can be
|
||
compiled into Cascading Style Sheets (CSS) and run on the client side or
|
||
server side. Designed by Alexis Sellier, Less is influenced by Sass and
|
||
has influenced the newer “SCSS” syntax of Sass, which adapted its
|
||
CSS-like block formatting syntax. Less provides the following
|
||
mechanisms: variables, nesting, mixins, operators and functions; the
|
||
main difference between Less and other CSS precompilers being that Less
|
||
allows real-time compilation via Less by the browser. Font: <a
|
||
href="https://en.wikipedia.org/wiki/Less_(stylesheet_language)">Wikipedia</a></p>
|
||
<p><strong><a href="#contents">Back to top</a></strong></p>
|
||
<h2 id="getting-started">Getting Started</h2>
|
||
<ul>
|
||
<li><a href="http://www.hongkiat.com/blog/less-basic/">Beginner’s
|
||
Guide</a></li>
|
||
<li><a
|
||
href="https://scotch.io/tutorials/getting-started-with-less">Getting
|
||
Started with Less</a></li>
|
||
<li><a
|
||
href="http://tutorialzine.com/2015/07/learn-less-in-10-minutes-or-less/">Learn
|
||
in 10 Minutes</a></li>
|
||
<li><a href="http://lesscss.org/">Official Guide</a></li>
|
||
<li><a href="https://github.com/less/less.js">Official
|
||
Repository</a></li>
|
||
</ul>
|
||
<p><strong><a href="#contents">Back to top</a></strong></p>
|
||
<h2 id="uitheme-frameworks-and-components">UI/Theme Frameworks and
|
||
Components</h2>
|
||
<ul>
|
||
<li><a href="http://rriepe.github.io/1pxdeep/">1pxdeep</a> - Brings
|
||
designing by relative visual weight, or designing with color schemes, to
|
||
Bootstrap.</li>
|
||
<li><a href="https://github.com/ant-design/ant-design/">Ant Design</a> -
|
||
An enterprise-class UI design language and React-based
|
||
implementation.</li>
|
||
<li><a
|
||
href="https://github.com/bassjobsen/bootstrap-a11y-theme">Bootstrap a11y
|
||
theme</a> - Makes web accessibility easier for Bootstrap
|
||
developers.</li>
|
||
<li><a href="http://getbootstrap.com/">Bootstrap 3</a> - Bootstrap is
|
||
the most popular HTML, CSS, and JS framework for developing responsive,
|
||
mobile first projects on the web.</li>
|
||
<li><a href="http://bootswatch.com/">Bootswatch</a> - Collection of free
|
||
themes for Bootstrap.</li>
|
||
<li><a href="http://cardinalcss.com/">Cardinal</a> - Small “mobile
|
||
first” CSS framework for front-end developers who build responsive web
|
||
applications.</li>
|
||
<li><a href="https://github.com/firminoweb/csshorus">CSSHórus</a> -
|
||
Library for development of responsive and mobile websites.</li>
|
||
<li><a href="http://designmodo.github.io/Flat-UI/">Flat UI Free</a> -
|
||
Theme and framework for Bootstrap.</li>
|
||
<li><a href="http://jbst.eu/">JBST</a> - Theme framework that can be
|
||
used as a standalone website builder or to create WordPress themes.</li>
|
||
<li><a href="https://github.com/metaskills/less-rails">Less Rails</a> -
|
||
Less for Rails.</li>
|
||
<li><a
|
||
href="https://github.com/FezVrasta/bootstrap-material-design">Material
|
||
Design for Bootstrap</a> - Material Design for Bootstrap is a Bootstrap
|
||
V3 compatible theme; it is an easy way to use the new Material Design
|
||
guidelines by Google in your Bootstrap 3 based application.</li>
|
||
<li><a href="http://metroui.org.ua/">Metro UI CSS</a> - Set of styles to
|
||
create a site with an interface similar to Windows 8.</li>
|
||
<li><a href="http://danmalarkey.github.io/schema/">Schema</a> - Light,
|
||
responsive, and lean frontend UI framework.</li>
|
||
<li><a href="http://semantic-ui.com/">Semantic UI</a> - UI component
|
||
framework based around useful principles from natural language.</li>
|
||
<li><a href="https://getuikit.com/">UIkit</a> - Lightweight and modular
|
||
front-end framework for developing web interfaces.</li>
|
||
<li><a href="https://www.weepower.com/">Wee</a> - Lightweight front-end
|
||
framework for logically building complex, responsive web projects.</li>
|
||
</ul>
|
||
<p><strong><a href="#contents">Back to top</a></strong></p>
|
||
<h2 id="libraries-and-mixins">Libraries and Mixins</h2>
|
||
<h3 id="grid">Grid</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/zirafa/bootstrap-grid-only">Bootstrap
|
||
Grid Only</a> - Bootstrap’s responsive grid and responsive utility
|
||
classes only, without any extras. Lightweight yet still powerful. Style
|
||
to taste.</li>
|
||
<li><a href="https://github.com/jonikorpi/Less-Framework">Framework</a>
|
||
- Less Framework is a CSS grid system for designing adaptive web sites.
|
||
It contains 4 layouts and 3 sets of typography presets, all based on a
|
||
single grid.</li>
|
||
<li><a href="http://flexible.gs/">Flexible Grid System</a> - This
|
||
framework will let you create your web applications in a flexible way
|
||
that you’ve never experienced before.</li>
|
||
<li><a href="http://fluidable.com/">Fluidable</a> - Fluidable is a
|
||
mobile first, responsive grid system. It is standalone, lightweight
|
||
& built using Less.</li>
|
||
<li><a href="https://github.com/goodpixels/less-grid-system">Grid
|
||
System</a> - Super-easy to use, markup-independent grid system.</li>
|
||
<li><a href="https://github.com/bassjobsen/LESS-Zen-Grid">Less Zen
|
||
Grid</a> - Implementation of <a
|
||
href="https://github.com/JohnAlbin/zen-grids">Zen Grids</a> in
|
||
Less.</li>
|
||
<li><a href="https://github.com/chromice/order.less">Order.Less</a> -
|
||
Baseline alignment, column grids and modular scales.</li>
|
||
</ul>
|
||
<p><strong><a href="#contents">Back to top</a></strong></p>
|
||
<h3 id="media-queries">Media Queries</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/buymeasoda/less-media-queries">CSS and
|
||
Media Query Strategies</a> - Using Less CSS to develop a media query
|
||
driven solution for modern and legacy browsers.</li>
|
||
<li><a href="https://github.com/mrmlnc/less-mq">Media Queries
|
||
Library</a> - Really simple media queries in Less.</li>
|
||
<li><a href="https://github.com/himedlooff/media-query-to-type">Media
|
||
Query to Type</a> - A method for creating an IE specific stylesheet that
|
||
allows the content of media queries to become accessible to Internet
|
||
Explorer 8 and below.</li>
|
||
</ul>
|
||
<p><strong><a href="#contents">Back to top</a></strong></p>
|
||
<h3 id="color">Color</h3>
|
||
<ul>
|
||
<li><a href="http://brand-colors.com/">Brand Colors</a> - 1100+
|
||
collection of popular brand colors available in Sass, Less, Stylus and
|
||
CSS.</li>
|
||
<li><a
|
||
href="http://jasonrobb.github.io/More-Colors.less/">More-Colors</a> -
|
||
Variables for easier color manipulation while you design in the
|
||
browser.</li>
|
||
<li><a href="https://github.com/yeun/open-color">Open Color</a> - Open
|
||
color is a color scheme for UI design. Available in CSS, SCSS, Less,
|
||
Stylus, Adobe library, Photoshop/Illustrator swatches and Sketch
|
||
palette.</li>
|
||
</ul>
|
||
<p><strong><a href="#contents">Back to top</a></strong></p>
|
||
<h3 id="animation">Animation</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/joshuapekera/animate">Animate</a> - A
|
||
library of CSS3 keyframe animations authored using Less.</li>
|
||
<li><a href="https://github.com/machito/animate.less">Animate Less</a> -
|
||
Port of Dan Eden’s <a
|
||
href="https://daneden.github.io/animate.css/">Animate.css</a> to
|
||
Less.</li>
|
||
<li><a href="https://github.com/sparanoid/cube.less">Cube Less</a> - 3D
|
||
(animated) cube using only CSS (Less), originally used by LeanCloud
|
||
(aka. AVOS Cloud).</li>
|
||
<li><a href="http://ianlunn.github.io/Hover/">Hover</a> - Collection of
|
||
CSS3 powered hover animated effects to be applied to links, buttons,
|
||
logos, SVG, featured images and so on.</li>
|
||
<li><a href="https://github.com/MarkRabey/less-burger">Less Burguer</a>
|
||
- Port of <a href="http://joren.co/sass-burger/">Sass Burger</a> to
|
||
Less.</li>
|
||
</ul>
|
||
<p><strong><a href="#contents">Back to top</a></strong></p>
|
||
<h3 id="miscellaneous">Miscellaneous</h3>
|
||
<ul>
|
||
<li><a href="http://mateuszkocz.github.io/3l/">3L</a> - Mixins
|
||
library.</li>
|
||
<li><a href="https://github.com/danielkatz/less-bidi">Bidi</a> - Set of
|
||
mixins for creating bi-directional styling.</li>
|
||
<li><a href="http://clearleft.github.io/clearless/">Clearless</a> -
|
||
Collection of mixins.</li>
|
||
<li><a href="http://chrsr.com/css3lessplease/">Css3LessPlease</a> -
|
||
Conversion of css3please.com to Less mixins.</li>
|
||
<li><a href="http://adodson.com/css-effects/">CssEffects</a> -
|
||
Collection of CSS style effects.</li>
|
||
<li><a href="http://cssowl.owl-stars.com/">Cssowl</a> - Mixin
|
||
library.</li>
|
||
<li><a
|
||
href="https://github.com/mrkrupski/LESS-Dynamic-Stylesheet">Dynamic
|
||
Stylesheet</a> - Set of useful mixins.</li>
|
||
<li><a href="https://github.com/ecomfe/est/">Est</a> - Mixin
|
||
library.</li>
|
||
<li><a href="http://db0company.github.io/css-hexagon/">Hexagon</a> -
|
||
Generate CSS hexagons with custom size and color.</li>
|
||
<li><a href="https://github.com/pixelass/homeless">Homeless</a> -
|
||
Helpful functions.</li>
|
||
<li><a href="http://lesselements.com/">Less Elements</a> - Set of basic
|
||
mixins.</li>
|
||
<li><a href="https://github.com/madebysource/lesshat">Lesshat</a> -
|
||
Smart mixins library.</li>
|
||
<li><a href="https://github.com/pixelass/lessley">Lessley</a> - A
|
||
jasmine like testing suite written in pure Less.</li>
|
||
<li><a href="https://github.com/belyan/lessmore">Lessmore</a> - Mixins
|
||
library. Cross-browser support for the CSS3 features and more.</li>
|
||
<li><a
|
||
href="https://github.com/segundofdez/normalize.less">Normalize</a> -
|
||
Modularized famous <a
|
||
href="https://github.com/necolas/normalize.css/">normalize.css</a> using
|
||
Less.</li>
|
||
<li><a href="http://oban.io/">Oban</a> - Collection of mixins.</li>
|
||
<li><a href="https://github.com/mdo/preboot">Preboot</a> - Collection of
|
||
mixins and variables for writing better CSS.</li>
|
||
<li><a href="https://github.com/imulus/retinajs">Retina.js</a> -
|
||
JavaScript, SCSS, Sass, Less, and Stylus helpers for rendering
|
||
high-resolution image variants.</li>
|
||
<li><a href="https://github.com/fahad19/shape.less">Shape</a> -
|
||
Collection of mixins for various shapes.</li>
|
||
<li><a
|
||
href="https://github.com/therebelrobot/tRRtoolbelt.less">TRRtoolbelt</a>
|
||
- Mixins and functions for common actions.</li>
|
||
</ul>
|
||
<p><strong><a href="#contents">Back to top</a></strong></p>
|
||
<h2 id="style-guides">Style Guides</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/handshake/less-style-guide">Handshake
|
||
Style Guide</a> - This guide presents a collection of best-practices and
|
||
coding conventions.</li>
|
||
<li><a href="https://github.com/bitmap/less-styleguide">WebMD Health
|
||
Services Style Guide</a> - This document outlines CSS/Less best
|
||
practices at WebMD Health Services.</li>
|
||
</ul>
|
||
<p><strong><a href="#contents">Back to top</a></strong></p>
|
||
<h2 id="ports-of-less">Ports of Less</h2>
|
||
<h3 id="java">Java</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/i-net-software/jlessc">JLessC</a> - Less
|
||
compiler written completely in Java.</li>
|
||
<li><a href="https://github.com/Asual/lesscss-engine">Less Engine</a> -
|
||
Runs Less in the Rhino JVM-based JavaScript interpreter.</li>
|
||
<li><a href="https://github.com/marceloverdijk/lesscss-java">Less CSS
|
||
Compiler for Java</a> - Runs Less in the Rhino JVM-based JavaScript
|
||
interprete.</li>
|
||
<li><a href="https://github.com/SomMeri/less4j">Less4j</a> - Native Java
|
||
implementation.</li>
|
||
<li><a href="https://github.com/houbie/lesscss">Lesscss</a> - Runs Less
|
||
using Rhino, Nasshorn or node.js engine; 1.7.0 compliant.</li>
|
||
<li><a href="https://github.com/houbie/lesscss-gradle-plugin">Lesscss
|
||
Gradle Plugin</a> - Gradle plugin based on Less.</li>
|
||
</ul>
|
||
<p><strong><a href="#contents">Back to top</a></strong></p>
|
||
<h3 id="net">.Net</h3>
|
||
<ul>
|
||
<li><a
|
||
href="http://www.nuget.org/packages/BundleTransformer.Less/">BundleTransformer.Less</a>
|
||
- Compiler written in .Net.</li>
|
||
<li><a href="http://www.dotlesscss.org/">Less CSS for .Net</a> -
|
||
Compiler written in .Net.</li>
|
||
</ul>
|
||
<p><strong><a href="#contents">Back to top</a></strong></p>
|
||
<h3 id="php">PHP</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/mishal/iless">ILess</a> - PHP port
|
||
written in Javascript.</li>
|
||
<li><a href="http://leafo.net/lessphp/">Lessphp</a> - Compiler written
|
||
in PHP.</li>
|
||
<li><a href="http://lessphp.gpeasy.com/">Less.php</a> - PHP port.</li>
|
||
</ul>
|
||
<p><strong><a href="#contents">Back to top</a></strong></p>
|
||
<h3 id="python">Python</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/lesscpy/lesscpy">Pyhton Compiler</a> -
|
||
Compiler written in Python.</li>
|
||
</ul>
|
||
<p><strong><a href="#contents">Back to top</a></strong></p>
|
||
<h3 id="ruby">Ruby</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/cowboyd/less.rb">Ruby Compiler</a> -
|
||
Less in Ruby’s V8 Engine.</li>
|
||
</ul>
|
||
<p><strong><a href="#contents">Back to top</a></strong></p>
|
||
<h3 id="go">Go</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/kib357/less-go">Go Compiler</a> - Runs
|
||
Less inside embedded Javascript engine.</li>
|
||
</ul>
|
||
<p><strong><a href="#contents">Back to top</a></strong></p>
|
||
<h2 id="guis-editors-and-plugins">GUIs, Editors and Plugins</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/josa42/atom-linter-less">Atom Linter</a>
|
||
- Linter plugin in the Atom text editor.</li>
|
||
<li><a href="http://css2less.co/">CSS 2 Convert</a> - Quick way to
|
||
automatically convert CSS to Less, easy as copy and paste.</li>
|
||
<li><a href="https://github.com/kizza/CSS-Less-ish">CSS Less(ish)</a> -
|
||
Sublime Text 2 & 3 plugin that implements a stripped down version of
|
||
the functionality in css preprocessors (such as Less).</li>
|
||
<li><a href="http://getcrunch.co/">Crunch 2!</a> - 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.</li>
|
||
<li><a href="https://diamond.js.org">Diamond</a> - Dependency management
|
||
built for Sass, Less, and CSS.</li>
|
||
<li><a
|
||
href="http://www.normalesup.org/~simonet/soft/ow/eclipse-less.html">Eclipse
|
||
Less Plugin</a> - This plugin extends the Eclipse IDE by providing handy
|
||
features to edit and compile Less stylesheets.</li>
|
||
<li><a href="https://github.com/gossi/eclipse-transpiler-plugin">Eclipse
|
||
Transpiler Plugin</a> - Eclipse plugin to automatically transpile your
|
||
files (Less, SASS, CoffeeScript, etc.).</li>
|
||
<li><a href="https://github.com/purcell/less-css-mode">Emacs</a> - Emacs
|
||
mode with support for compile-on-save.</li>
|
||
<li><a href="https://github.com/gruntjs/grunt-contrib-less">Grunt
|
||
Contrib</a> - Compile Less files to CSS using Grunt.</li>
|
||
<li><a href="https://github.com/jgable/grunt-lesslint">Grunt Lint</a> -
|
||
Lint your Less files using CSS Lint from Grunt.</li>
|
||
<li><a href="https://github.com/plus3network/gulp-less">Gulp Less</a> -
|
||
Plugin for Gulp.</li>
|
||
<li><a href="https://github.com/hayaku/hayaku">Hayaky</a> - Hayaku is a
|
||
bundle of useful scripts aiming for rapid front-end web
|
||
development.</li>
|
||
<li><a href="https://github.com/Hyra/less">Hyra Helper</a> - CakePHP
|
||
plugin that converts your Less files to CSS using only PHP.</li>
|
||
<li><a href="http://koala-app.com/">Koala</a> - Koala is a
|
||
cross-platform GUI application for compiling Less, sass and
|
||
coffeescript.</li>
|
||
<li><a href="https://github.com/azrafe7/LESS-for-Notepad-plusplus">Less
|
||
for Notepad++</a> - Syntax Highlighting for Notepad++.</li>
|
||
<li><a href="https://github.com/danro/Less-sublime">Less Sublime</a> -
|
||
Syntax highlighting for Sublime Text.</li>
|
||
<li><a href="https://github.com/lesshint/lesshint">Lesshint</a> - Tool
|
||
to aid you in writing clean and consistent Less.</li>
|
||
<li><a href="http://livereload.com/">LiveReload</a> - CSS edits and
|
||
image changes apply live. CoffeeScript, SASS, Less and others just
|
||
work.</li>
|
||
<li><a href="https://wearekiss.com/simpless">SimpleLess</a> - SimpleLess
|
||
is a minimalistic Less compiler. Just drag, drop and compile.</li>
|
||
<li><a href="https://github.com/timdouglas/sublime-less2css">Sublime
|
||
Less2CSS</a> - Sublime Text 2 Plugin to compile Less files to css on
|
||
save.</li>
|
||
<li><a
|
||
href="https://github.com/alexnj/SublimeOnSaveBuild">SublimeOnSaveBuild</a>
|
||
- Trigger a build the moment you save a file in Sublime Text 2. Works
|
||
best with web projects that make use of Less, Compass and any other
|
||
pre-processor or a makefile.</li>
|
||
<li><a href="https://github.com/groenewege/vim-less">Vim Less</a> - This
|
||
vim bundle adds syntax highlighting, indenting and autocompletion.</li>
|
||
<li><a href="http://vswebessentials.com/">Visual Studio Web
|
||
Essentials</a> - If you ever write CSS, HTML, JavaScript, TypeScript,
|
||
CoffeeScript or Less, then you will find many useful features that make
|
||
your life as a developer easier.</li>
|
||
<li><a href="http://lesscss.org/usage/#editors-and-plugins">Winless</a>
|
||
- 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.</li>
|
||
</ul>
|
||
<p><strong><a href="#contents">Back to top</a></strong></p>
|
||
<h2 id="online-less-compilers">Online Less Compilers</h2>
|
||
<ul>
|
||
<li><a href="http://beautifytools.com/less-compiler.php">BeautifyTools
|
||
Less Compiler</a> - Online Less compiler with optional formatting and
|
||
minification at <a
|
||
href="http://beautifytools.com/">BeautifyTools</a>.</li>
|
||
<li><a href="http://ecomfe.github.io/est/fiddle/">EstFiddle</a> - 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.</li>
|
||
<li><a href="http://demo-iless.rhcloud.com/">ILess</a> - Live demo of <a
|
||
href="https://github.com/mishal/iless">ILess</a> PHP compiler.</li>
|
||
<li><a href="http://leafo.net/lessphp/editor.html">Leafo</a> - <a
|
||
href="http://leafo.net/lessphp/">Lessphp</a> live demo.</li>
|
||
<li><a href="http://less2css.org/">Less2CSS</a> - Online Integrated
|
||
Development Environment (IDE) that is hosted in a browser allowing users
|
||
to edit and compile Less to CSS in real-time.</li>
|
||
<li><a href="http://lessphp.gpeasy.com/demo">LessPHP</a> - <a
|
||
href="http://lessphp.gpeasy.com/">Less.php</a> live demo.</li>
|
||
<li><a href="http://lesstester.com/">Lesstester</a> - Online compiler
|
||
for Less CSS.</li>
|
||
<li><a href="http://precess.co/">Precess</a> - A real time preprocesser
|
||
compiler.</li>
|
||
<li><a href="http://winless.org/online-less-compiler">Winless</a> - This
|
||
Online Less Compiler can help you to learn Less. You can go through the
|
||
examples below or try your own Less code.</li>
|
||
</ul>
|
||
<p><strong><a href="#contents">Back to top</a></strong></p>
|
||
<h2 id="online-web-idesplaygrounds-with-less-support">Online Web
|
||
IDEs/Playgrounds with Less support</h2>
|
||
<ul>
|
||
<li><a href="http://codepen.io/">CodePen</a> - CodePen is a playground
|
||
for the front end side of the web..</li>
|
||
<li><a href="http://cssdeck.com/labs">CSSDeck Labs</a> - CSSDeck Labs is
|
||
a place where you can quickly create some experiments (or testcases)
|
||
that involves HTML, CSS, JS code.</li>
|
||
<li><a href="http://fiddlesalad.com/less/">Fiddle Salad</a> - An online
|
||
playground with an instantly ready coding environment.</li>
|
||
<li><a href="http://jsbin.com/">JS Bin</a> - JS Bin is a webapp
|
||
specifically designed to help JavaScript and CSS folk test snippets of
|
||
code.</li>
|
||
<li><a href="http://jsfiddle.net/hb2rsm2x/">JsFiddle</a> - Online Web
|
||
Editor.</li>
|
||
</ul>
|
||
<p><strong><a href="#contents">Back to top</a></strong></p>
|
||
<h2 id="translations">Translations</h2>
|
||
<ul>
|
||
<li><a href="http://lesscss.cn/">Chinese (中文)</a></li>
|
||
<li><a href="http://lesscss.dk/">Danish</a></li>
|
||
<li><a href="http://www.lesscss.de">German</a></li>
|
||
<li><a
|
||
href="http://bertzzie.com/post/7/dokumentasi-less-bahasa-indonesia">Indonesian</a></li>
|
||
<li><a href="http://less-css.ir">Iranian</a></li>
|
||
<li><a href="http://less-ja.studiomohawk.com/">Japanese</a></li>
|
||
<li><a href="http://ciembor.github.com/lesscss.org/">Polish</a></li>
|
||
<li><a href="http://amatellanes.github.io/lesscss.org/">Spanish</a></li>
|
||
<li><a href="http://less.eten.vn/">Vietnamese</a></li>
|
||
</ul>
|
||
<p><strong><a href="#contents">Back to top</a></strong></p>
|
||
<h2 id="articles">Articles</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.smashingmagazine.com/2011/09/an-introduction-to-less-and-comparison-to-sass/">An
|
||
Introduction To Less, And Comparison To Sass</a></li>
|
||
<li><a href="http://www.cssauthor.com/less-tutorials/">Best Less
|
||
Tutorials : A Comprehensive Guide to Less</a></li>
|
||
<li><a
|
||
href="https://medium.com/social-tables-tech/doing-more-with-less-256054d19f7d#.a41deg3dx">Doing
|
||
MORE with Less</a></li>
|
||
<li><a
|
||
href="https://medium.com/@omererkan/how-to-make-a-loops-in-less-css-d74062debef1#.snv6jqw5x">How
|
||
to Make a Loops in Less CSS</a></li>
|
||
<li><a
|
||
href="https://medium.com/@zamamohammed/lets-use-lessjs-to-create-less-css-not-just-css-2d45d92a62e8#.jsocohrne">Lets
|
||
use Less to Create Less CSS not just CSS</a></li>
|
||
<li><a
|
||
href="https://medium.com/@ddprrt/revisiting-less-50b741bd884#.oyion811m">Revisiting
|
||
Less</a></li>
|
||
</ul>
|
||
<p><strong><a href="#contents">Back to top</a></strong></p>
|
||
<h3 id="books">Books</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.packtpub.com/web-development/instant-less-css-preprocessor-how-instant">Instant
|
||
Less CSS Preprocessor How-to</a></li>
|
||
<li><a
|
||
href="http://pdf.th7.cn/down/files/1508/Less%20Web%20Development%20Essentials,%202nd%20Edition.pdf">Less
|
||
Web Development Essentials</a></li>
|
||
<li><a
|
||
href="https://www.packtpub.com/web-development/learning-lessjs">Learning
|
||
Less</a></li>
|
||
</ul>
|
||
<p><strong><a href="#contents">Back to top</a></strong></p>
|
||
<h2 id="videos">Videos</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.packtpub.com/web-development/learning-less-video">Learning
|
||
Less</a></li>
|
||
<li><a
|
||
href="https://www.youtube.com/watch?v=oh7_iZWvIyU&list=PLE42615v2IxlxVyGZd0rKnOzbqUtUiekE">Less
|
||
(CSS pre-processor) Tutorials</a></li>
|
||
<li><a
|
||
href="https://www.youtube.com/watch?v=YQYJUeokqOY&list=PL6gx4Cwl9DGCshbAx1JpBtNoKh8iKAAiy">Less
|
||
CSS Tutorials for Beginners</a></li>
|
||
<li><a
|
||
href="https://www.youtube.com/watch?v=-D5mWO9_vLI&list=PLLa1ZAmCB2zjEZ4QNLDi4173_xIGeV6nC">Less
|
||
CSS - Tutorials for Beginners</a></li>
|
||
</ul>
|
||
<p><strong><a href="#contents">Back to top</a></strong></p>
|
||
<h2 id="experiments">Experiments</h2>
|
||
<ul>
|
||
<li><a href="https://codepen.io/MamayAlexander/pen/aAsiq">3D
|
||
Buttons</a></li>
|
||
<li><a href="https://codepen.io/eky/pen/dCmnp">Border Radiuses
|
||
Mixin</a></li>
|
||
<li><a href="https://codepen.io/bitmap/pen/eBbHt">CSS3 Color
|
||
Wheel</a></li>
|
||
<li><a href="https://codepen.io/ericrasch/pen/uGlvA">DEMO:
|
||
Variables</a></li>
|
||
<li><a href="https://codepen.io/octavioamu/pen/zJexw">Easy
|
||
Buttons</a></li>
|
||
<li><a href="https://codepen.io/eky/pen/eAnCI">Linear Gradient
|
||
Mixin</a></li>
|
||
<li><a href="https://codepen.io/lukasdietrich/pen/mkeAJ">Navbar</a></li>
|
||
<li><a href="https://codepen.io/mecarter/pen/idKqg">Responsive
|
||
Grid</a></li>
|
||
<li><a href="https://codepen.io/ericrasch/pen/rndaF">Sizable CSS-only
|
||
Icons</a></li>
|
||
<li><a href="https://codepen.io/eky/pen/AaCwF">Triangle / Arrow
|
||
Mixin</a></li>
|
||
<li><a href="https://codepen.io/tag/less/">More…</a></li>
|
||
</ul>
|
||
<p><strong><a href="#contents">Back to top</a></strong></p>
|
||
<h2 id="community">Community</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/less/less.js/blob/master/CONTRIBUTING.md">Contributing
|
||
to Less</a></li>
|
||
<li><a
|
||
href="http://webchat.freenode.net/?randomnick=1&channels=%23%23lesscss">Freenode</a></li>
|
||
<li><a href="https://medium.com/search?q=less%20css">Medium</a></li>
|
||
<li><a
|
||
href="https://www.quora.com/topic/LESS-stylesheet-language">Quora</a></li>
|
||
<li><a href="http://stackoverflow.com/questions/tagged/less">Stack
|
||
Overflow</a></li>
|
||
<li><a href="https://twitter.com/hashtag/lesscss">Twitter</a></li>
|
||
</ul>
|
||
<p><strong><a href="#contents">Back to top</a></strong></p>
|
||
<h2 id="contributing">Contributing</h2>
|
||
<p>Your contributions are always welcome! <a
|
||
href="https://github.com/LucasBassetti/awesome-less/blob/master/CONTRIBUTING.md">Click
|
||
Here to read the guidelines</a>.</p>
|
||
<p><strong><a href="#contents">Back to top</a></strong></p>
|
||
<h2 id="license">License</h2>
|
||
<p><a href="https://creativecommons.org/publicdomain/zero/1.0/"><img
|
||
src="http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg"
|
||
alt="CC0" /></a></p>
|
||
<p>To the extent possible under law, <a
|
||
href="http://lucasbassetti.com.br">Lucas Bassetti</a> has waived all
|
||
copyright and related or neighboring rights to this work.</p>
|
||
<p><strong><a href="#contents">Back to top</a></strong></p>
|
||
<p><a href="https://github.com/LucasBassetti/awesome-less">less.md
|
||
Github</a></p>
|