LESS

Less – dynamiczne arkusze stylów

 

dobre praktyki:

  • do komentarzy używaj // zamiast /* .. */
  • używaj mixins z parametrami
  • kompilując kod LESS minifikuj CSS
  • twórz kod modułowo, będzie go można łatwo użyć do innych projektów
  • używaj wzorców
  • oddzielaj funkcje od stylu, detale od głównych idei
  • stwórz katalog lib ze zbiorem kodu wielokrotnego użytku

 

co zawiera LESS:

  • zmienne
  • mixins (domieszki)
  • operacje
  • funkcje

 

działanie:

  • przeglądarki
  • po stronie serwera (środowiska Node.js, Rhino)

 

Zmienne, variables:

definiowanie i użycie:

//LESS

@baseColor1: #e22117;
@baceColor2: #f2c909;

body{
  background-color:@baseColor1;
}

h1{
  color:@baseColor2;
}

 

Mixins

rodzaj dziedziczenia – pozwala na zawarcie właściwości jednej klasy dla innej klasy – załączenie nazwy klasy jako właściwości.

Mogą zachowywać się jak funkcje, pobierać argumenty.


// LESS

.rounded-corners (@radius: 3px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

.div_first {
  .rounded-corners();
}
.div_second {
  .rounded-corners(5px);
}

	

// CSS

.div_first {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}
.div_second {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

 

Parametric mixins (parametized mixins) bez wstępnego określenia parametru pozwala na zapisanie reguł które nie są interpretowane od razu ale wtedy gdy zamieścisz je w innym zbiorze reguł z dołączona wartością:


.ghost-button (@radius:5px, @width:200px, @padding:5px, @color:#fff, @border:5px, @margin:5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius; 
  margin:@margin auto; 
  display: block;
  width: @width;
  padding: @padding;
  color: @color;
  border: @border solid @color;
  text-align: center;
  outline: none;
  text-decoration: none;  
}

Można tez zmodyfikować podczas zamieszczania dowolny parametr:


//LESS

@lightYellow: #fff000;

@green: #34A853;



//definicja mixin

.border(@style: solid, @width: 2px, @color: @lightYellow){
border:@style @width @color;
}

//użycie

.border(@width: 3px, @color: @green);

 

Mixin Guards, Guarded mixins – warunkowe 'wstawki’


//LESS

@base: #F9690E;

.box-shadow(@style, @c) when (iscolor(@c)) {
  box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  div { .box-shadow(0 0 5px, 30%) }
}
.box {
  p { .box-shadow(0 0 5px, @base) }
}


//CSS

.box div {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.box p {
  box-shadow: 0 0 5px #F9690E;
}
//LESS

@template_color: #e22117;
@dark: #000;                                
@light: #fff;

.set-text-color (@bg-color) when (lightness(@bg-color) >= 50%) {
  color: @dark;
  background: @bg-color;
}
.set-text-color (@bg-color) when (lightness(@bg-color) < 50%) {
  color: @light;
  background: @bg-color;
}

.box-1 {
  .set-text-color(lighten(@template_color, 30%));
}

.box-2 {
   .set-text-color(@template_color);
}

//CSS
.box-1 {
  color: #000;
  background: #f5a19d;
}

.box-2 {
  color: #fff;
  background: #e22117;
}

Zagnieżdżanie – nested rules, nesting:

less pozwala na pisanie zagnieżdżonych wewnątrz siebie elementów dzięki czemu w css uzyskujemy pełna strukturę selektorów.

Przydatne użycie znaku & pozwala się odwołać do własnie opisywanego selektora.

// LESS

#header {
  background-color:#e22117;
  color:#fff;
  
  nav {
    font-size: 12px;
    font-weight: 700;
    border-bottom:solid 1px #fff;
  }
  ul { 
    list-style: none;
    text-align:center;
    
    li {
      display:inline;
      margin:0 10px;
      
      a {
        color:#fff;
        
        &:hover{
          color:#f2c909;
        }
      }
    }
  }
}


// CSS

#header {
  background-color:#e22117;
  color:#fff;
}  
#header nav {
  font-size: 12px;
  font-weight: 700;
  border-bottom:solid 1px #fff;
}
#header ul { 
  list-style: none;
  text-align:center;
}
#header ul li {
  display:inline;
  margin:0 10px;
}
#header ul li a {
  color:#fff;
}        
#header ul li a:hover{
  color:#f2c909;
}

 

Funkcje, operacje

dodawanie, odejmowanie, dzielenie, mnożenie wartości właściwości i kolorów – złożone zależności między właściwościami.

operacje wykonujemy wewnątrz nawiasów.

// LESS

@border: 1px;
@baseColor: #111;
@myRed: #842210;

.div_first {
  color: (@baseColor * 3);
  border-top: @border;
  border-left: (@border * 2);
}
.div_second {
  color: (@baseColor + #003300);
  border-color: desaturate(@myRed, 10%);
}

// CSS

.div_first {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
.div_second {
  color: #114411;
  border-color: #7d2717;
}

// LESS

@myBlue: #5B83AD;
@lightBlue: (@nice-blue + #111);

.div_first { color: @lightBlue; }

// CSS

.div_first { color: #6c94be; }

// LESS

@text: "Hello my sweet!";
@var: 'text';
content: @@var;

// CSS

content: "Hello my sweet!";

 

Funkcje kolorów

  • darken() – dodaje czerń
  • lighten() – dodaje biel
  • saturate() – bardziej intensywne kolory
  • desaturate() – bardziej wyblakłe kolory
  • fadein() – dodaje przeźroczystość
  • fadeout() – usuwa przeźroczystość
  • spin() – modyfikuje odcień koloru

 

Extend

dodaje style określone dla innej klasy do klasy w jakiej jest dodany


// LESS
nav ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}

// CSS
nav ul {
  background: blue;
}
.inline, nav ul {
  color: red;
}

// LESS
nav ul:extend(.inline){
  background: pink;
}
.inline {
  color: gray;
}


.my-inline-block {
  display: inline-block;
  font-size: 0;
}
.thing1 {
  &:extend(.my-inline-block);
}
.thing2 {
  &:extend(.my-inline-block);
}

// CSS
.my-inline-block,
.thing1,
.thing2 {
  display: inline-block;
  font-size: 0;
}

 

Escaping – escaped value

Korzystając z wartości które nie są zgodne ze składnią CSS lub ich składnia jest nierozpoznawalna przez LESS korzystamy ze znaku ~ i zamykamy wartość w łańcuchu:


// LESS

.class {
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

&nbsp;

// CSS

.class {
filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}

 

Built-in Function

 

Kompilacja LESS na CSS

 

za pomocą JavaScript


    <link rel="stylesheet/less" type="text/css" href="css/styles.less">
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

 

Lub dzięki edytorowi Atom i dodatkowi less-autocompile

gdzie wstawiamy w pliku styles.less zakomentowaną instrukcję:

//out: styles.css, sourcemap: true, compress: false
//main: styles.less

  • out – ścieżka i nazwa pliku css który ma powstać po kompilacji
  • sourcemap – tworzenie pliki mapy źródłowej
  • compress – kompresja pliku css
  • main – wskazuje plik less do kompilacji

 

LESS libraries

http://getpreboot.com/

http://lesselements.com/

http://lesselements.com/