Како претворити стари ЦСС у мање
Већину основе за ЛЕСС покрили смо у претходним постовима. Ако сте пратили нашу ЛЕСС серију, вјерујемо да у овом тренутку већ имате добру идеју о томе како користити Променљиве, Микинс и Операција за мање.
Такође смо поменули како претворити ЛЕСС у регуларни ЦСС, са апликацијом или са компајлером. Али, како да радимо супротно; претворити ЦСС у МАЊЕ? Овај савјет је за тебе.
Коришћење алата
Са све већом популарношћу ЦСС препроцессор, неке нове алатке и апликације које су суштински настојале да олакшају живот веб дизајнера или програмера, као што је овај алат: ЦСС2Лесс.
Овај алат нам омогућава да конвертујемо регуларни ЦСС у ЛЕСС. Дакле, покушајмо. Имам следеће ЦСС правила из моје старе датотеке за конверзију.
нав хеигхт: 40пк; ширина: 100%; бацкгроунд: # 000; бордер-боттом: 2пк солид #ффф; нав ул паддинг: 0; маргин: 0 ауто; нав ли дисплаи: инлине; флоат: лефт; нав а боја: #ффф; дисплеј: инлине-блоцк; видтх: 100пк; текст-сенка: 1пк 1пк 0пк # 000; нав ли а бордер-ригхт: 1пк солид #ффф; бок-сизинг: гранични-бок; нав ли: ласт-а бордер-ригхт: 0; нав а: ховер, нав а: активна позадинска боја: #ффф;
Ево резултата.
нав а: ховер, нав а: активан бацкгроунд-цолор: #ффф; нав висина: 40пк; ширина: 100%; бацкгроунд: # 000; бордер-боттом: 2пк солид #ффф; а цолор: #ффф; дисплеј: инлине-блоцк; видтх: 100пк; текст-сенка: 1пк 1пк 0пк # 000; ул паддинг: 0; маргин: 0 ауто; ли: ласт-цхилд а бордер-ригхт: 0; ли дисплаи: инлине; флоат: лефт; а бордер-ригхт: 1пк солид #ффф; бок-сизинг: гранични-бок;
Као што можемо видети горе, наш стари ЦСС је сада угњежен као ЛЕСС.
Ограничење
Међутим, можемо видјети и нека ограничења у резултатима конверзије. У старом ЦСС-у имамо неколико истих боја, као што је то у ове две декларације бордер-боттом: 2пк солид #ффф; и бордер-ригхт: 1пк солид #ффф; имамо обе границе у белој боји. У ЛЕСС-у заправо можемо сачувати ову константну вредност у а Променљива.
Такође се не гнијезди и раздваја псеудо- * са амперсанд (&) симболом, као у следећим правилима ли: последње дете и нав а: ховер, нав а: активан. Они остају само онакви какви јесу, гдје можемо на овај начин поједноставити правила;
ли &: прво дете а &: ховер &: активно
Закључак
Упркос ограничењима која тренутно имају, овај алат може бити од велике помоћи у уштеди времена за уграђивање ЦСС скупова правила. Остало је само да урадимо ручно; могуће све док се горе наведена ограничења решено.
