Apresentação de conhecimentos na AG2 Publicis Modem

1. Matheus S. Thomaz
AG2 Publicis Modem - 04/09/2014

2. O QUE É?

3. LESS
is more
while
CSS
is always sucks

4. “With great power comes great responsability”
Tio Ben

5. “With great power comes great responsability”
voltaire

6. Pré processador CSS
Uma linguagem que, após compilada, gera CSS.

7. POR QUE UTILIZAR
LESS?

8. Ou melhor,
PORQUE NÃO
UTILIZAR CSS?

9. Desorganizado.
Não tem padrão.
Folhas se estilo (podem ficar) muito extensas.
Repetitivo.
Uso de prefixos.
[...]

10. VANTAGENS

11. Organização
Imports
Aninhamento (nested)
Variáveis
Funções
Mixins
[...]

12. Principais
FEATURES

13. Variáveis
INPUT
@verde: #6BAF2A;
@fSize: 20px;h1 {
color: @verde;
font-size: @fSize;
}
OUTPUT
h1 {
color: #6BAF2A;
font-size: 20px;
}
http://lesscss.org/features/#features-overview-feature-variables

14. Operações
INPUT
@corLorem: #111;
@fSize: 20px;h1 {
color: @corLorem * 3;
font-size: @fSize + 4;
}
div {
background: (@corLorem + #222) * 1.5;
}
OUTPUT
h1 {
color: #333;
font-size: 24px;
}
div {
background: #4d4d4d;
}
http://lesscss.org/features/#features-overview-feature-operations

15. Funções
INPUT
@corLorem: #842210;
div {
background: saturate(@corLorem, 10%);
}
Funções de cor
lighten(@corLorem, 10%)
darken(@corLorem, 10%)
saturate(@corLorem, 10%)
desaturate(@corLorem, 10%)
fadein(@corLorem, 10%)
fadeout(@corLorem, 10%)
OUTPUT
div {
background: #7d2717;
}
http://lesscss.org/features/#mixins-as-functions-feature

16. Mixins
INPUT
.rounded (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded;
}
#footer {
.rounded(10px);
}
OUTPUT
#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
http://lesscss.org/features/#mixins-feature

17. Nested
INPUT
#header {
.logo {float: left}
.menu {
ul {float: right;color: blue;
li {float: left;
&:hover {}
}
}
}
}
.btn {boder dfdsfsdf-sdfsdf
&-red {color: red;}
}
OUTPUT
#header .logo {
float: left;
}
#header .menu ul {
float: right;
color: blue
}
#header .menu ul li {
float: left;
}
http://lesscss.org/features/#features-overview-feature-nested-rules

18. Selecionar parente
INPUT
#header {
a {color: blue;
&:hover {color: red;}
}
}
.button {
&-ok {
background-image: url("ok.png");
}
&-cancel {
background-image: url("cancel.png");
}
}
OUTPUT
#header a {color: blue;}
#header a:hover {color: red;}
.button-ok {
background-image: url("ok.png");
}.button-cancel {
background-image: url("cancel.png");
}
http://lesscss.org/features/#parent-selectors-feature

19. Loops
INPUT
.loop(@counter) when (@counter > 0) {
.loop((@counter - 1));
width: (10px * @counter);
}div {
.loop(5);
}
OUTPUT
div {
width: 10px;
width: 20px;
width: 30px;
width: 40px;
width: 50px;
}

20. Import
INPUT
@import "foo";
@import "foo.less";
@import "foo.php";
@import "foo.css";
OUTPUT
// Tudo que os outros arquivos conterem
:)

21. COMO USAR?

22. Client side (odeio essa po**a)
Incluir .less da mesma forma do .css
Incluir less.js
<link href=”style.less” rel=”stylesheet/less” type=”text/css” />
<script src=”less.js” type=”text/javascript” />

23. “Server” Side (agora sim o)
Utilizando node
npm install -g less
$ lessc style.less > style.css

24. “Server” Side (agora sim o)
Utilizando compiladores - crunchapp.net

25. “Server” Side (agora sim o)
Utilizando compiladores - alphapixels.com/prepros/

26. “Server” Side (agora sim o)
Utilizando compiladores - koala-app.com/

27. VAI USAR LESS?

28. Conheça o Less Hat
Melhor (na minha opnião) biblioteca de mixins - lesshat.madebysource.com

29. PERGUNTAS?

30. PORQUE LESS
E não outro preprocessador?

31. Porque eu tava afim de
aprender LESS :)

32. LESS
Sass
Stylus

33. PERGUNTAS?

34. OBRIGADO!
Matheus S. Thomaz
AG2 Publicis Modem - 28/08/2014