Як перетворити старий CSS на МЕНШЕ
Ми розглянули більшість основ для МЕНЕ в попередніх посадах. Якщо ви дотримувалися нашої серії LESS, ми вважаємо, що на даний момент у вас вже є хороша ідея про те, як використовувати Змінні, Міксини і Операція у МЕНШЕ.
Ми також згадали, як перетворити LESS на звичайний CSS, з додатком або з компілятором. Але як нам робити навпаки; конвертувати CSS в LESS? Добре, ця порада для вас.
Використання інструмента
Зі зростанням популярності Росії Препроцесор CSS, деякі нові інструменти та програми, які, по суті, мають на меті полегшити життя веб-дизайнера або розробника, наприклад цей інструмент: CSS2Less.
Цей інструмент дозволяє нам перетворювати звичайний CSS на LESS. Отже, давайте спробуємо. Я маю наступні правила CSS з мого старого файлу для перетворення.
nav висота: 40px; ширина: 100%; фон: # 000; border-bottom: 2px твердий #fff; nav ul padding: 0; маржа: 0 авто; nav li відображення: вбудований; поплавок: лівий; nav a color: #fff; дисплей: вбудований блок; ширина: 100px; текстова тінь: 1px 1px 0px # 000; навігація правий край: 1px твердий #fff; розмір коробки: кордон; навігація: остання дитина прикордонний-право: 0; nav a: hover, nav a: активний background-color: #fff;
Ось результат.
nav a: hover, nav a: активний background-color: #fff; nav висота: 40px; ширина: 100%; фон: # 000; border-bottom: 2px твердий #fff; a color: #fff; дисплей: вбудований блок; ширина: 100px; текстова тінь: 1px 1px 0px # 000; ul padding: 0; маржа: 0 авто; li: остання дитина a border-right: 0; li відображення: inline; поплавок: лівий; a прикордонний-правий: 1px твердий #fff; розмір коробки: кордон;
Як ми бачимо вище, наш старий CSS тепер вкладений у LESS.
Обмеження
Проте ми також можемо побачити деякі обмеження в результатах конверсії. У старому CSS ми маємо кілька таких же кольорів, як у цих двох деклараціях border-bottom: 2px твердий #fff; і правий край: 1px твердий #fff; ми маємо обидві межі в білому. У LESS ми можемо зберегти цю постійну величину в a Змінна.
Він також не гніздиться і не розділяє псевдо- * з символом амперсанда (&), таким як у наступних правилах Лі: остання дитина і nav a: hover, nav a: активний. Вони просто залишаються такими, якими вони є, де ми можемо спростити правила таким чином;
li &: перша дитина a &: hover &: активна
Висновок
Незважаючи на обмеження, які в даний час все ще існують, цей інструмент може бути дуже корисним для економії нашого часу для вкладання наборів правил CSS. Треба лише зробити все інше вручну; можливо, до тих пір, поки не будуть вказані вище обмеження вирішено.
