Less - CSS Dynamic

{less}
LESS uma linguagem dinâminca de estilo que é baseada em CSS,
que consiste na mesma ideia e uma sintaxe familiar.

{less}
➜ Pré-Processador

{less}
➜ Pré-Processador
➜ Compilação via JavaScript

VARIÁVEIS
Variáveis servem para definir valores padrões para seus projetos, pode
assim reutilizá-los em toda a sua folha de estilo.

VARIÁVEIS
➜ Alterações a niveis globais

VARIÁVEIS
➜ Constantes

VARIÁVEIS
➜ 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

Hierarquia
html
1 <ul class=”ul-first”>
2 <li>
3 <span>Option 1.0</span>
4 <ul class=”drop-down”>
5 <li>
7 </li>
8 </ul>
9 </li>
10 <li>
13 <li>
15 </li>
16 </ul>
17 </li>
18 </ul>
css
1 .ul-first {
2 margin: 0 auto;
3 }
4
5 .ul-first li {
6 list-style: none;
7 display: inline-block;
8 }
9
10
11
.ul-first li .drop-down {
12
display: none;
13
}
14
15
16 }
.ul-first li:hover .drop-down {
display: block;

Hierarquia
html
1 <ul class=”ul-first”>
2 <li>
5 <li>
7 </li>
8 </ul>
9 </li>
10 <li>
13 <li>
15 </li>
16 </ul>
17 </li>
18 </ul>
less
1 .ul-first {
2 margin: 0 auto;
3 li {
4 list-style: none; display: inline-block;
5 .drop-down {
6 display: none;
7 }
8 &:hover {
9 .drop-down {
10 display: block;
11 }
12 } // end :hover
13 } // end li
14 } // end ul
css
1 .ul-first {
2 margin: 0 auto;
3 }
4
5 .ul-first li {
6 list-style: none;
7 display: inline-block;
8 }
9
10
11
.ul-first li .drop-down {
12
display: none;
13
}
14
15
16 }
.ul-first li:hover .drop-down {
display: block;

Operações matemáticas
(adeus valores mágicos)
css
1 .container {
2 padding: 35px;
3 width: 960px;
4 }
6 .coluna {
7 width: 435px;
8 }
5

css
1 .container {
2 padding: 35px;
3 width: 960px;
4 }
6 .coluna {
7 width: 435px;
8 }
5
(960px – 35px * 2 – 20px) / 2 = 435px

css
1 .container {
2 padding: 35px;
3 width: 960px;
4 }
6 .coluna {
7 width: 435px;
8 }
less
1 .coluna {
2 width: (960px – 35px * 2 – 20px) / 2;
3 }
5
(960px – 35px * 2 – 20px) / 2 = 435px

css
1 .container {
2 padding: 35px;
3 width: 960px;
4 }
6 .coluna {
7 width: 435px;
8 }
less
1 .coluna {
2 width: (960px – 35px * 2 – 20px) / 2;
3 }
OU
1 @total: 960px;
2 @respiro: 35px;
3 @espaco: 20px;
5 .container {
6 padding: @respiro;
7 width: @total;
8 }
10 .coluna {
11 width: (@total - @respiro * 2 - @espaco) / 2;
12 }
4
9
5
(960px – 35px * 2 – 20px) / 2 = 435px

MiXINS
Mixins segue o conceito de programação orientada a objetos, que
representa a utilização de classes dentro de classes.

MiXINS
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

MiXINS
less
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 }

MiXINS
less
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

less
1 @corbase: #459266;
2
3 button {
4 background: @corbase;
5 }
6
7 button:hover {
8 background: lighten(@corbase, 20%);
9 }
10
11 OU
12
13 button:hover {
14 background: saturate(@corbase, 20%);
15 }
FUNÇÕES

less
1 @corbase: #459266;
2
3 button {
4 background: @corbase;
5 }
6
7 button:hover {
8 background: lighten(@corbase, 20%);
9 }
10
11 OU
12
13 button:hover {
14 background: saturate(@corbase, 20%);
15 }
Outras funções:
darken, desaturate, fadein, fadeout, spin, mix.
FUNÇÕES

Node.js install
Windows
https://nodejs.org
Linux
https://nodejs.org
➜ Package
➧ curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
sudo apt-get install -y nodejs
➧ curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -
sudo apt-get install -y nodejs

Less install
Linux
$ npm install less -g
➜ Git
git clone https://github.com/less/less.js.git
Windows
$ npm install -g less
➜ Download
https://github.com/less/less.js/zipball/master
➜ Git
git clone https://github.com/less/less.js.git

Using Less
Using command line
$ lessc style.less
Output CSS
$ lessc style.less style.css
Output CSS minified
$ lessc --clean-css styles.less styles.min.css
➜ Plugin:
$ npm install -g less-plugin-clean-css

OBRIGADO!
Gabriel Corrêa
https://github.com/gabscorrea

Less - CSS Dynamic

Mais conteúdo relacionado

Destaque

Semelhante a Less - CSS Dynamic

Less - CSS Dynamic