LESS

Less - Links

CSS-TRICKS.com - Useful CSS3 LESS Mixins.

Hongkiat.com - LESS CSS - Beginner's Guide.

Crunch! - The LESS editor ....

WinLess.

Less - Introductie

Less (style sheet language)

Less (Leaner Style Sheets; sometimes stylized as LESS) is a dynamic preprocessor 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 is an open source project. Its first version was written in Ruby; however, in the later versions, use of Ruby has been deprecated and replaced by JavaScript. The indented syntax of Less is a nested metalanguage, as valid CSS is valid Less code with the same semantics. Less provides the following mechanisms: variables, nesting, mixins, operators and functions; the main difference between Less and other CSS precompilers is that Less allows real-time compilation via less.js by the browser.

Bron: Wikipedia: Less (style sheet language).

{less}

Overview

Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official documentation for Less, the language and Less.js, the JavaScript tool that converts your Less styles to CSS styles.

Because Less looks just like CSS, learning it is a breeze. Less only makes a few convenient additions to the CSS language, which is one of the reasons it can be learned so quickly.

Bron: Lesscss.org: {less} - It's CSS, with just a little more..

Using Less.js to Simplify Your CSS3

LESS is an amazing little tool that extends CSS with the addition of variables, mixins, operations and nested rules. What this means is that you can write leaner code very quickly. And with the recent rise of complex CSS3 properties, we have a few glaring examples of code that could definitely stand to be simplified a bit.

Today we’ll take a look at how to use the newest JavaScript implementation of LESS to simplify lengthy CSS3 markup. One of the key features we’ll be looking at that I haven’t seen discussed elsewhere is how to deal with multiple variables in mixins. It’s fairly simple but can be confusing if you’ve never tried it.

Bron: design shack: Using Less.js to Simplify Your CSS3.

Less - Voorbeeld stylesheet

Classes uit elements.less:

.rounded(@radius: 2px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

.opacity(@opacity: 0.5) {
  -moz-opacity: @opacity;
  -khtml-opacity: @opacity;
  -webkit-opacity: @opacity;
  opacity: @opacity;
  @opperc: @opacity * 100;
  -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})";
  filter: ~"alpha(opacity=@{opperc})";
}

Less - Voorbeeld met layout in LESS

Een voorbeeld met layout in LESS: Voorbeeld in LESS.

Joost De WebMaker
2002-2024 © Joost van Meeteren

Laatste update website: vrijdag 22 november 2024

Deze website past cookies toe voor optimaal gebruik van dit platform | bron | Akkoord