Домашня » Кодування » Як перетворити старий CSS на МЕНШЕ

    Як перетворити старий 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. Треба лише зробити все інше вручну; можливо, до тих пір, поки не будуть вказані вище обмеження вирішено.