Kuinka muuntaa vanhaa CSS ää LESS iin

Olemme peittäneet suurimman osan LESSin perusteista aiemmissa viestissämme. Jos olet seurannut LESS-sarjamme, uskomme, että tässä vaiheessa sinulla on jo hyvä idea siitä, miten käytät muuttujat, Mixins ja Operaatio LESSissä.

Olemme myös maininneet, miten LESS muunnetaan tavalliseksi CSS: ksi, sovelluksella tai kääntäjällä. Mutta miten teemme päinvastaisen; muuntaa CSS LESSiksi? No, tämä kärki on sinulle.

Työkalun käyttäminen

Kanssa kasvava suosio CSS-esikäsittelijä, uusia työkaluja ja sovelluksia, joiden tarkoituksena on helpottaa web-suunnittelijan tai kehittäjän elämää, kuten tämä työkalu: CSS2Less.

Tämän työkalun avulla voimme muuntaa säännöllisen CSS: n LESS-muotoon. Joten, anna sen kokeilla. Minulla on seuraavat CSS-säännöt muusta vanhasta tiedostostani.

 nav korkeus: 40px; leveys: 100%; tausta: # 000; reunapohja: 2px kiinteä #fff;  nav ul pehmuste: 0; marginaali: 0 auto;  nav li näyttö: inline; float: vasen;  nav a väri: #fff; näyttö: inline-block; leveys: 100px; teksti-varjo: 1px 1px 0px # 000;  nav li a border-right: 1px solid #fff; box-mitoitus: border-box;  nav li: viimeinen lapsi raja-oikea: 0;  nav a: hover, nav a: aktiivinen taustaväri: #fff;  

Tässä on tulos.

 nav a: hover, nav a: aktiivinen taustaväri: #fff;  nav korkeus: 40px; leveys: 100%; tausta: # 000; reunapohja: 2px kiinteä #fff; a väri: #fff; näyttö: inline-block; leveys: 100px; teksti-varjo: 1px 1px 0px # 000;  ul pehmuste: 0; marginaali: 0 auto;  li: last-last a border-right: 0;  li näyttö: inline; float: vasen; a border-right: 1px solid #fff; box-mitoitus: border-box;  

Kuten edellä näemme, vanha CSS on nyt sisäkkäin kuin LESS.

rajoitus

Voimme kuitenkin nähdä myös muutoksia tuloksen tuloksiin. Vanhassa CSS: ssä on useita samoja värejä, kuten näissä kahdessa ilmoituksessa reunapohja: 2px kiinteä #fff; ja raja-oikea: 1kpl kiinteä #fff; meillä on molemmat reunat valkoisina. LESSissä voimme todella tallentaa tämän vakion arvon a muuttuja.

Se ei myöskään pesä ja erottaa pseudo-* symbolilla (&), kuten seuraavissa säännöissä li: last-lapsi ja nav a: hover, nav a: aktiivinen. Ne vain pysyvät sellaisina kuin ne ovat, missä voimme yksinkertaisesti yksinkertaistaa sääntöjä tällä tavalla;

 li &: ensimmäinen lapsi  a &: hover  &: aktiivinen  

johtopäätös

Huolimatta nykyisistä rajoituksista tämä työkalu voi auttaa säästämään CSS-sääntöjen pesimistä. Meidän tarvitsee vain tehdä loput käsin; mahdollisesti, kunnes edellä mainitut rajoitukset ovat ratkaistu.