Как конвертировать старый CSS в LESS
Мы рассмотрели большую часть основ LESS в наших предыдущих постах. Если вы следили за нашей серией LESS, мы считаем, что на данный момент у вас уже есть хорошая идея о том, как использовать переменные, Примеси а также операция менее.
Мы также упоминали, как конвертировать LESS в обычный CSS с помощью приложения или с помощью компилятора. Но как нам поступить наоборот? преобразовать CSS в LESS? Ну, этот совет для вас.
Использование инструмента
С ростом популярности CSS препроцессор, некоторые новые инструменты и приложения, которые по сути направлены на облегчение жизни веб-дизайнера или разработчика, такие как этот инструмент: CSS2Less.
Этот инструмент позволяет нам конвертировать обычный CSS в LESS. Итак, давайте попробуем. У меня есть следующие правила CSS из моего старого файла для конвертации.
nav height: 40px; ширина: 100%; фон: # 000; border-bottom: 2px solid #fff; nav ul padding: 0; поле: 0 авто; nav li display: inline; плыть налево; nav a color: #fff; дисплей: встроенный блок; ширина: 100 пикселей; тень текста: 1px 1px 0px # 000; nav li a border-right: 1px solid #fff; коробчатого проклейки: граница-бокс; nav li: last-child a border-right: 0; nav a: hover, nav a: active background-color: #fff;
Вот результат.
nav a: hover, nav a: active background-color: #fff; nav height: 40px; ширина: 100%; фон: # 000; border-bottom: 2px solid #fff; a color: #fff; дисплей: встроенный блок; ширина: 100 пикселей; тень текста: 1px 1px 0px # 000; ul padding: 0; поле: 0 авто; li: last-child a border-right: 0; li display: inline; плыть налево; a border-right: 1px solid #fff; коробчатого проклейки: граница-бокс;
Как мы видим выше, наш старый CSS теперь вложен как в LESS.
ограничение
Однако мы также можем видеть некоторые ограничения в результатах преобразования. В старом CSS у нас есть несколько одинаковых цветов, таких как в этих двух объявлениях border-bottom: 2px solid #fff; а также border-right: 1px solid #fff; у нас есть обе границы в белом. В МЕНЬШЕ мы можем фактически сохранить это постоянное значение в переменная.
Он также не гнездится и не разделяет псевдо- * с символом амперсанда (&), например, в следующих правилах ли: последний ребенок а также nav a: hover, nav a: active. Они просто остаются такими, как есть, где мы действительно можем упростить наборы правил таким образом;
li &: first-child a &: hover &: active
Заключение
Несмотря на существующие ограничения, этот инструмент может помочь сэкономить наше время на вложение наборов правил CSS. Нам нужно сделать все остальное вручную; возможно, до тех пор, пока решены.
