Home Personale Less,preprocesor css.

Less,preprocesor css.

3 min read
1
0
34

De curand am inceput sa folosesc preprocesorul css less.Cand te apuci de o tema sau orice proiect care automat include si un fisier css te poate ajuta foarte mult si castigi timp considerabil.Acum lucrez la o tema pentru filme si vreau sa va arat cum am facut eu de am inclus less in tema mea wordpress.

Am intrat pe site-ul oficial lesscss.org am descarcat cea mai noua varianta de acolo princlick dreapta save as, dupa care am introdus fisierul intr-un folder numit js.Am introdus in tagul <head> … </head> al temei in header.php urmatorul cod…

[codesyntax lang=”php” container=”div” blockstate=”expanded”]

<link rel="stylesheet/less" type="text/css" href="<?php bloginfo('template_url'); ?>/styles.less" />
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/less-1.4.1.min.js"></script>

[/codesyntax]

Dupa cum se poate observa exista si un cod de link catre fisierul styles.less.Evident l-am creeat si pe acesta si introdus in tema.Din acest moment toate modificarile le fac in fisierul styles.less care este o extensie css pe care wordpress o recunoaste automat.

Cum te ajuta less?

In fisierul styles.less chiar la inceput poti face nise declaratii (cum ar fi variabilele in php) care te pot ajuta pe parcursul editarii fisierului.De exemplu :

[codesyntax lang=”php”]

@bg: #D9EEF2;
@color1: #222;
@fontsize1: 13px;
@font1: Helvetica, sans-serif;

[/codesyntax]

Acum ma pot folosi de variabilele aceste pe tot parcursul fisierului.Evident se pot declara cate variabile vrei si in ce combinatii vrei.

Cand vreau sa ma folosesc de un font deja declarat o pot face asa:

font-family: @font1;

background-color: @bg;

color: @color1;

Cred ca a-ti prins ideea.Documentatia este mult mai stufoasa de atat si de aceea va rog sa o cititi daca vreti sa folositi less.

Load More Related Articles
Load More By Bucur
Load More In Personale

One Comment

  1. Iulian

    iulie 31, 2013 at 15:01

    As indrazni sa spun ca asta e tendinta in materie de css+wordpress. Bun tutorialul!

Check Also

Aparatele de aer conditionat, tot mai prezente in casele noastre

Aparate de aer condiționat ca acestea, provenind de la branduri internaționale redutabile,…