MENOS Css … finalmente

Less.css pode ser compilado no lado do cliente ou no lado do servidor. Provavelmente, vou querer compilar less.css no lado do servidor.

Então, o que faz menos permitir que você escreva … menos?

Bem, variáveis para um. Vamos dar uma olhada:

@header-font: Georgia;
h1, h2, h3, h4 {
        font-family: @header-font;
}
.large {
        font-family: @header-font;
}

Um dos melhores usos para variáveis ​​é usá-lo para definir cores. Você também pode realizar operações básicas.

Nesting

article.post {
    p {
        margin: 0 0 12px 0;
    }
    a {
        color: red;
    }
    a:hover {
        color: blue;
    }
    img {
        float: left;
    }
}

Posso fazer o acima e não preciso prefixar cada elemento / seletor com article.post

Mixins

.rounded_top {
    -webkit-border-top-left-radius: 6px
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-top: 6px;
    -border-top-left-radius: 6px;
    -border-top-right-radius: 6px;
}

.tab {
    background: #333;
    color:#fff;
    .rounded_top;
}

.submit {
    .tab;
    background: red;
}

Mixins permitem definir e reutilizar classes. Muito útil para coisas como botões, cantos arredondados, entalhes, etc.

Mixins Paramétricos

.rounded_top(@radius:6px) {
    -webkit-border-top-left-radius: @radius;
    -webkit-border-top-right-radius: @radius;
    -moz-border-radius-topleft: @radius;
    -moz-border-radius-top: @radius;
    -border-top-left-radius: @radius;
    -border-top-right-radius: @radius;
}

.tab {
    background: #333;
    color:#fff;
    .rounded_top;
}

.submit {
    .rounded_top(3px);
    background: red;
}

Isso basicamente permite que você declare instruções semelhantes a funções. No exemplo acima, 6px é o valor padrão para o topo arredondado se nenhum for especificado. Caso contrário, leva o parâmetro para topo arredondado. Você pode ter vários parâmetros para definir mixins mais complexos.

Namespaces

Ao começar a trabalhar em um novo site (ou seja, para testes A / B), posso usar essa técnica e usá-la sem bagunçar nenhum outro estilo que já possuo ou queira adicionar no futuro.

#my_framework {
    p {
        margin: 12px 0;
    }
    a {
        color:blue;
        text-decoration:none;
    }
    .submit {
        background: red;
        color: white;
        padding: 5px 12px;
    }
}

.submit_button {
    #my_framework > .submit;
}

Essa técnica também é boa para mudanças e modificações rápidas de temas. SE você desenvolver um tema como modelo, poderá incluí-los como pacotes no mesmo arquivo LESS e usar o que precisar:

#fw_1 {
    p {
        margin: 12px 0;
    }
    a {
        color: blue;
        text-decoration: none;
    }
    .submit {
        background: red;
        color: white;
        padding: 5px 12px;
    }
}

#fw_2 {
    p {
        margin: 8px 0;
    }
    a {
        color: red;
        text-decoration: underline;
    }
    .submit {
        background: blue;
        color: white;
        padding: 8px 20px;
    }
}

 .submit_button {
    #fw_2 > .submit;
}

Interpolação de String

Strings podem ser armazenados em variáveis ​​e então usados ​​dentro de valores de propriedade

@url: "http://mycompany.com/assets/";background-image: url("@{url}/sprite.png");

Isso pode ser muito útil se quisermos usar o url de um cdn e mantê-lo no CSS (onde ele pertence)