1 of 14

LESS CSS

write less, do more

2 of 14

Czym jest LESS?

- rozszerzenie CSS o zachowania dynamiczne

- kompilowany do CSS

- kompatybilny wstecz z CSS

3 of 14

Zmienne

// LESS��@color: #4D926F;�@foo: #333333;

@bar: foo;

�#header {� color: @color;�}�h2 {� color: @@bar;�}

/* Compiled CSS */��#header {� color: #4D926F;�}�h2 {� color: #333333;�}

4 of 14

Mixins

// LESS��.rounded-corners (@radius: 5px) {� -webkit-border-radius: @radius;� -moz-border-radius: @radius;� -ms-border-radius: @radius;� -o-border-radius: @radius;� border-radius: @radius;�}��#header {� .rounded-corners;�}�#footer {� .rounded-corners(10px);�}

/* Compiled CSS */��#header {� -webkit-border-radius: 5px;� -moz-border-radius: 5px;� -ms-border-radius: 5px;� -o-border-radius: 5px;� border-radius: 5px;�}�#footer {� -webkit-border-radius: 10px;� -moz-border-radius: 10px;� -ms-border-radius: 10px;� -o-border-radius: 10px;� border-radius: 10px;�}

5 of 14

Mixins - argumenty

// LESS��.mixin () {� background: transparent;�}

.mixin-visible {� background: red;�}��.block (@bg, @color) {

background: @bg;

color: @color;

foo: @arguments;

}�

#footer {� .block (url(‘bg.jpg’), red; #555);

}

/* Compiled CSS */��.mixin-visible {

background: red;

}

#footer {

background: url(‘bg.jpg’), #ff0000;

color: #555555;

foo: url(‘bg.jpg’), #ff0000 #555555;

}

6 of 14

Mixins - matching

// LESS��.mixin (heavy, @color) {� color: 3px solid @color;�}

.mixin (light, @color) {� border: 1px dotted @color;�}

.mixin (@_, @color) {� display: block;�}��.class {� .mixin(heavy, #333) // 3px solid #333�}�

// LESS��.mixin (@color) when (warunek) {� ...�}

.mixin (@color) when (!warunek) {� ...

}

7 of 14

Nesting

// LESS��#header {� h1 {� font-size: 26px;� }� p { font-size: 12px;� a { text-decoration: none;� &:hover { border-width: 1px; }

#page & { font-weight: bold; }

}

}�}�

/* Compiled CSS */��#header h1 {� font-size: 26px;�}�#header p {� font-size: 12px;�}�#header p a {� text-decoration: none;�}�#header p a:hover {� border-width: 1px;�}�#page #header p a {� font-weight: bold;�}

8 of 14

Operacje

// LESS��@the-border: 1px;

@offset: 5%;

@base-color: #111;

�#header {� color: (@base-color * 3);� margin-top: (@offset + 100% / 2);� border-right: (@the-border * 2);�}�#footer {� color: (@base-color + #003300);

}�

/* Compiled CSS */��#header {� color: #333333;� margin-top: 55%;� border-right: 2px;�}�#footer {� color: #114411;

}�

9 of 14

Funkcje

// LESS��@width: 0.6;�@base-color: #321;�@red: #842210;��#header {� width: percentage(@width);

}�#footer {� background: lighten(@red, 30%);

color: desaturate(@base-color, 20%);�}

/* Compiled CSS */��#header {� width: 60%;�}�#footer {

background: #e8604a;

color: #e619e5;

}

10 of 14

Inne: komentarze, namespace, scope

definicja:

#bundle {� .header() { ... }� .footer() { ... }�}

użycie:

#header a {� #bundle > .header;�}

�

// LESS��@color: blue;��#header {� color: @color; // blue�}�#page {

@color: yellow; � #footer {� color: @color; // yellow� }�}

/* CSS comment */

// LESS comment

11 of 14

Inne: import, escaping, interpolacja

@import “lib.less” // przetwarzany

@import “lib.css” // nieprzetwarzany�

// media queries:

@import “printer-friendly.css” print

�@import == @import-once (od v1.4.0)�

interpolacja:

@base-url: “http://foo.bar”;��img {� background: url(“@{base-url}/bg.jpg”);

}

interpolacja selektorów:

@hidden: blocked;��.@{hidden} { // .blocked � display: none; �}�

escaping:

.class {

filter: ~“ms:weird.Syntax.Value()”;

}

// output:

.class {

filter: ms:weird.Syntax.Value();

}

12 of 14

Użycie

- client side: źle!

- watch mode?

- IDEA: watcher

- plugin do mavena

13 of 14

Przydatne linki

http://lesscss.org

http://less2css.org/

http://lesselements.com/

14 of 14

Pytania?

Michał Rybak @ TouK, Warszawa 11.10.2013