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()";
}

 

// 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/

–