Aprenda X em Y Minutos

//Comentários de linha única são removidos quando Less é compilado para CSS.

/*Comentários de várias linhas são preservados.*/



/* Variáveis
==============================*/


/* Você pode armazenar um valor de CSS (como uma cor) em uma variável.
   Use o símbolo '@' para criar uma variável. */

@primary-color: #a3a4ff;
@secondary-color: #51527f;
@body-font: 'Roboto', sans-serif;

/* Você pode usar as variáveis ​​em toda a sua folha de estilo.
   Agora, se você quiser alterar uma cor, só precisa fazer a alteração uma vez. */

body {
    background-color: @primary-color;
    color: @secondary-color;
    font-family: @body-font;
}

/* Isso compilará para: */

body {
    background-color: #a3a4ff;
    color: #51527F;
    font-family: 'Roboto', sans-serif;
}


/* Isso é muito mais sustentável do que ter que mudar a cor
   cada vez que aparece em toda a sua folha de estilo. */



/* Mixins
==============================*/


/* Se você achar que está escrevendo o mesmo código para mais de um
   elemento, você pode querer reutilizá-lo facilmente. */

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

/* Você pode usar o mixin simplesmente adicionando o seletor como um estilo. */

div {
    .center;
    background-color: @primary-color;
}

/* Que compilaria para: */

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}
div {
    display: block;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    background-color: #a3a4ff;
}

/* Você pode omitir o código mixin de ser compilado adicionando parênteses
   depois do seletor. */

.center() {
  display: block;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

div {
  .center;
  background-color: @primary-color;
}

/* Que compilaria para: */
div {
  display: block;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  background-color: #a3a4ff;
}



/* Aninhamento
==============================*/


/* Less permite aninhar seletores nos seletores. */

ul {
    list-style-type: none;
    margin-top: 2em;

    li {
        background-color: #f00;
    }
}

/* '&' será substituído pelo seletor pai. */
/* Você também pode aninhar pseudo-classes. */
/* Tenha em mente que o aninhamento excessivo tornará seu código menos sustentável.
   As melhores práticas recomendam não ultrapassar 3 níveis de profundidade ao aninhar.
   Por exemplo: */

ul {
  list-style-type: none;
  margin-top: 2em;

  li {
    background-color: red;

    &:hover {
      background-color: blue;
    }

    a {
      color: white;
    }
  }
}

/* Compila para: */

ul {
  list-style-type: none;
  margin-top: 2em;
}

ul li {
  background-color: red;
}

ul li:hover {
  background-color: blue;
}

ul li a {
  color: white;
}



/* Functions
==============================*/


/* Less fornece funções que podem ser usadas para realizar uma variedade de
   tarefas. Considere o seguinte: */

/* Funções podem ser invocadas usando seu nome e passando os
   argumentos requeridos. */

body {
  width: round(10.25px);
}

.header {
    background-color: lighten(#000, 0.5);
}

.footer {
  background-color: fadeout(#000, 0.25)
}

/* Compila para: */

body {
  width: 10px;
}

.header {
  background-color: #010101;
}

.footer {
  background-color: rgba(0, 0, 0, 0.75);
}

/* Você também pode definir suas próprias funções. Funções são muito semelhantes às
   mixins. Ao tentar escolher entre uma função ou a um mixin, lembre-se
   que mixins são melhores para gerar CSS, enquanto as funções são melhores para
   lógica que pode ser usada em todo o seu código Less. Os exemplos na
   seção 'Operadores Matemáticos' são candidatos ideais para se tornarem funções reutilizáveis. */

/* Esta função calcula a média de dois números: */

.average(@x, @y) {
  @average-result: ((@x + @y) / 2);
}

div {
  .average(16px, 50px); // "chama" o mixin
  padding: @average-result;    // use seu valor de "retorno"
}

/* Compila para: */

div {
  padding: 33px;
}



/* Estender (herança)
==============================*/


/* Estender é uma maneira de compartilhar as propriedades de um seletor com outro. */

.display {
  height: 50px;
}

.display-success {
  &:extend(.display);
    border-color: #22df56;
}

/* Compila para: */

.display,
.display-success {
  height: 50px;
}
.display-success {
  border-color: #22df56;
}

/* Estender uma instrução CSS é preferível para criar um mixin
   por causa da maneira como agrupa as classes que compartilham
   o mesmo estilo base. Se isso foi feito com um mixin, as propriedades
   seriam duplicadas para cada declaração que
   chamou o mixin. Embora isso não afete o seu fluxo de trabalho,
   adicione o inchaço desnecessário aos arquivos criados pelo compilador Less. */



/* Parciais e Importações
==============================*/


/* Less permite criar arquivos parciais. Isso pode ajudar a manter o seu
   código Less modularizado. Arquivos parciais convencionalmente começam com um '_',
   por exemplo. _reset.less. e são importados para um arquivo less principal que recebe
   o css compilado. */

/* Considere o seguinte CSS que vamos colocar em um arquivo chamado _reset.less */

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

/* Less disponibiliza @import que podem ser usadas para importar parciais em um arquivo.
   Isso difere da declaração tradicional CSS @import que faz
   outra solicitação HTTP para buscar o arquivo importado. Less leva o
   arquivo importado e combina com o código compilado. */

@import 'reset';

body {
  font-size: 16px;
  font-family: Helvetica, Arial, Sans-serif;
}

/* Compila para: */

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font-size: 16px;
  font-family: Helvetica, Arial, Sans-serif;
}



/* Operações Matemáticas
==============================*/


/* Less fornece os seguintes operadores: +, -, *, / e %. Estes podem
   ser úteis para calcular valores diretamente nos seus arquivos Less
   para usar valores que você já calculou manualmente. Abaixo está um exemplo
   de como configurar um design simples de duas colunas. */

@content-area: 960px;
@main-content: 600px;
@sidebar-content: 300px;

@main-size: @main-content / @content-area * 100%;
@sidebar-size: @sidebar-content / @content-area * 100%;
@gutter: 100% - (@main-size + @sidebar-size);

body {
  width: 100%;
}

.main-content {
  width: @main-size;
}

.sidebar {
  width: @sidebar-size;
}

.gutter {
  width: @gutter;
}

/* Compila para: */

body {
  width: 100%;
}

.main-content {
  width: 62.5%;
}

.sidebar {
  width: 31.25%;
}

.gutter {
  width: 6.25%;
}