Dummy Less CSS PHP

Projeto simples para leigos ou designers que não querem entender muito de como compilar esta coisa.

Instalação

Basta baixar este repositorio ou clicar em Download e baixar tudo. Projeto original: http://leafo.net/lessphp/docs/

Utilizado

• Primeiramente você precisará de um servidor local em php, tipo... XAMPP, WAMPP, EasyPHP
• Segundo, você precisa estar acostumado a rodar o servidor local, tipo... digitar no navegador http://localhost e funcionar
• depois é só ir na sua pasta onde se encontra o diretório css e colocar os arquivos deste projeto próximos á ela
• exemplo:

    meu_projeto
        css
        less
            estilos.less
        javascript
        img
        index.html
        less.php

Transformando .less em .css

Se suas pastas estiverem parecidas com o exemplo acima, basta chamar http://localhost/meu_projeto/less.php e pronto! Ele irá buscar o estilos.less e transformar ele em estilos.css dentro da pasta css.

Boas Práticas

Em seus arquivos .less, quando for utilizar o @import do LessCSS, utilize os nomes com o caracter _ (underline) antes do nome. Ex.:

    meu_projeto
        css
        less
            estilos.less
            _formularios.less
            _geral.less

Desta forma, será criado somente um arquivo estilos.css os demais o compilador irá ignorar. Ex.: estilos.less

body{
    p{
        text-align: left;
    }
}
@import "_formularios";
@import "_geral";

table{
.
.
.

Alterando o Dreameaver para aceitar extenssões .less

• Vá até a pasta onde você instalou seu Dreamweaver, ex: C:/Arquivos de programas/Adobe/Adobe Dreamweaver CS3/
• entre na pasta configuration/DocumentTypes
• abra o arquivo MMDocumentTypes.xml
• procure pelo trecho:

<documenttype id="CSS" internaltype="Text" winfileextension="css" macfileextension="css" file="Default.css" writebyteordermark="false">
        <TITLE>
                <MMString:loadString id="mmdocumenttypes_30" />
        </TITLE>
        <description>
                <MMString:loadString id="mmdocumenttypes_31" />
        </description>
</documenttype>

• inclua a extensão less juntamente com a extensão css, de forma que fique assim:

<documenttype id="CSS" internaltype="Text" winfileextension="css,less" macfileextension="css,less" file="Default.css" writebyteordermark="false">
        <TITLE>
                <MMString:loadString id="mmdocumenttypes_30" />
        </TITLE>
        <description>
                <MMString:loadString id="mmdocumenttypes_31" />
        </description>
</documenttype>

Brújula

Algumas funções prontas para importar

@import "brujula/opacity"
.minhaClasse{
    @opacity(0.6);
}