O documento descreve a linguagem LESS, que é um pré-processador para CSS. LESS permite o uso de variáveis, mixins, operações matemáticas e funções para gerar código CSS de forma dinâmica e reutilizável. O documento explica como instalar e usar o LESS através da linha de comando ou plugins.
2. {less}
LESS uma linguagem dinâminca de estilo que é baseada em CSS,
que consiste na mesma ideia e uma sintaxe familiar.
3. {less}
LESS uma linguagem dinâminca de estilo que é baseada em CSS,
que consiste na mesma ideia e uma sintaxe familiar.
➜ Pré-Processador
4. {less}
LESS uma linguagem dinâminca de estilo que é baseada em CSS,
que consiste na mesma ideia e uma sintaxe familiar.
➜ Pré-Processador
➜ Compilação via JavaScript
5. VARIÁVEIS
Variáveis servem para definir valores padrões para seus projetos, pode
assim reutilizá-los em toda a sua folha de estilo.
6. VARIÁVEIS
Variáveis servem para definir valores padrões para seus projetos, pode
assim reutilizá-los em toda a sua folha de estilo.
➜ Alterações a niveis globais
7. VARIÁVEIS
Variáveis servem para definir valores padrões para seus projetos, pode
assim reutilizá-los em toda a sua folha de estilo.
➜ Alterações a niveis globais
➜ Constantes
8. VARIÁVEIS
Variáveis servem para definir valores padrões para seus projetos, pode
assim reutilizá-los em toda a sua folha de estilo.
➜ Alterações a niveis globais
➜ Constantes
9. VARIÁVEIS
Variáveis servem para definir valores padrões para seus projetos, pode
assim reutilizá-los em toda a sua folha de estilo.
➜ Alterações a niveis globais
➜ Constantes
less
1 @orange: #E85A05;
2 @green: #008000;
4 label {
5 color: @orange;
6 }
8 span {
9 color: @green;
10 }
3
7
css
1 label {
2 color: #E85A05;
3 }
5 span {
6 color: #008000;
7 }
4
16. MiXINS
Mixins segue o conceito de programação orientada a objetos, que
representa a utilização de classes dentro de classes.
17. MiXINS
Mixins segue o conceito de programação orientada a objetos, que
representa a utilização de classes dentro de classes.
less
1 .radius(@raio: 5px) {
2 -webkit-border-radius: @raio;
3 -moz-border-radius: @raio;
4 border-radius: @raio;
5 }
6
7
8 .container {
9 .radius();
10
18. MiXINS
Mixins segue o conceito de programação orientada a objetos, que
representa a utilização de classes dentro de classes.
less
1 .radius(@raio: 5px) {
2 -webkit-border-radius: @raio;
3 -moz-border-radius: @raio;
4 border-radius: @raio;
5 }
6
7
8 .container {
9 .radius();
10
css
1 .container {
2 -webkit-border-radius: 5px;
3 -moz-border-radius: 5px;
4 border-radius: 5px;
5 }
19. MiXINS
Mixins segue o conceito de programação orientada a objetos, que
representa a utilização de classes dentro de classes.
less
1 .radius(@raio: 5px) {
2 -webkit-border-radius: @raio;
3 -moz-border-radius: @raio;
4 border-radius: @raio;
5 }
6
7
8 .container {
9 .radius();
10
css
1 .container {
2 -webkit-border-radius: 5px;
3 -moz-border-radius: 5px;
4 border-radius: 5px;
5 }
less
1 .f-l() {
2 float: left;
3 }
4
5 .f-r() {
6 float: right;
7 }
8