Hogyan lehet átalakítani a régi CSS-t LESS-re

Korábbi hozzászólásainkban a LESS alapjainak nagy részét lefedtük. Ha követte a LESS sorozatunkat, úgy véljük, hogy ezen a ponton már jó ötleted van arról, hogyan kell használni változók, mixinek és Művelet kevesebb.

Azt is megemlítettük, hogyan lehet konvertálni a LESS-et rendszeres CSS-be, egy alkalmazással vagy fordítóval. De hogyan csináljuk az ellenkezőjét; a CSS átalakítása LESS-re? Nos, ez a tipp az Ön számára.

Eszköz használata

A növekvő népszerűsége CSS előfeldolgozó, néhány új eszköz és alkalmazás, amelyek lényegében a webes tervező vagy a fejlesztő életének megkönnyítésére szolgálnak, például ez az eszköz: CSS2Less.

Ez az eszköz lehetővé teszi számunkra, hogy a rendszeres CSS-t LESS-re alakítsuk át. Szóval, próbáljuk meg. A következő CSS-szabályaim a régi fájlból konvertálhatók.

 nav magasság: 40px; szélesség: 100%; háttér: # 000; határ alsó: 2px szilárd #fff;  nav ul padding: 0; margin: 0 auto;  nav li display: inline; balra lebeg;  nav a color: #fff; kijelző: inline-block; szélesség: 100px; szöveg-árnyék: 1px 1px 0px # 000;  nav li a border-right: 1px szilárd #fff; box-méretezés: border-box;  nav li: utolsó gyermek a határ-jobb: 0;  nav a: hover, nav a: aktív háttérszín: #fff;  

Itt az eredmény.

 nav a: hover, nav a: aktív háttérszín: #fff;  nav magasság: 40px; szélesség: 100%; háttér: # 000; határ alsó: 2px szilárd #fff; a szín: #fff; kijelző: inline-block; szélesség: 100px; szöveg-árnyék: 1px 1px 0px # 000;  ul padding: 0; margin: 0 auto;  li: utolsó gyermek a határ-jobb: 0;  li kijelző: inline; balra lebeg; a határ-jobb: 1px szilárd #fff; box-méretezés: border-box;  

Amint a fentiekben láthatjuk, a régi CSS most már beágyazódik, mint a LESS.

Korlátozás

Ugyanakkor láthatunk néhány korlátozást az átalakítás eredményei között. A régi CSS-ben több azonos színe van, mint például a két nyilatkozatban határ alsó: 2px szilárd #fff; és jobbra: 1px szilárd #fff; mindkét határa fehér. A LESS-ben valójában ezt az állandó értéket tárolhatjuk a Változó.

Nem is fészkel és elválasztja ál-* és (és) szimbólummal, például az alábbi szabályokkal li: last-child és nav a: hover, nav a: aktív. Ők csak úgy maradnak, mint amilyenek, ahol valójában így egyszerűsíthetjük a szabályokat;

 li &: első gyermek  a &: hover  &: aktív  

Következtetés

Annak ellenére, hogy jelenleg korlátai vannak, ez az eszköz segíthet abban, hogy időt takarítson meg a CSS-szabályzatok fészkelésére. A többit csak kézzel kell elvégezni; esetleg addig, amíg a fenti korlátok meg nem szűnnek megoldódott.