Как конвертировать старый CSS в LESS

Мы рассмотрели большую часть основ LESS в наших предыдущих постах. Если вы следили за нашей серией LESS, мы считаем, что на данный момент у вас уже есть хорошее представление о том, как использовать переменные, миксины и операции в МЕНЬШЕ,

Мы также упоминали, как конвертировать LESS в обычный CSS с помощью приложения или с помощью компилятора. Но как нам поступить наоборот? преобразовать CSS в LESS? Ну, этот совет для вас.

Использование инструмента

С ростом популярности препроцессора CSS появляются некоторые новые инструменты и приложения, которые, по сути, стремятся облегчить жизнь веб-дизайнера или разработчика, такие как этот инструмент: CSS2Less,

Этот инструмент позволяет нам конвертировать обычный CSS в LESS. Итак, давайте попробуем. У меня есть следующие правила CSS из моего старого файла для конвертации.

nav {
высота: 40 пикселей;
ширина: 100%;
фон: # 000;
border-bottom: 2px solid #fff;
}
nav ul {
отступы: 0;
поле: 0 авто;
}
nav li {
дисплей: встроенный;
плыть налево;
}
nav {
цвет: #fff;
дисплей: встроенный блок;
ширина: 100 пикселей;
тень текста: 1px 1px 0px # 000;
}
nav li a {
border-right: 1px solid #fff;
коробчатые проклейки: пограничный ящик;
}
nav li: последний ребенок a {
граница-право: 0;
}
nav a: hover, nav a: active {
цвет фона: #fff;
}

Вот результат.

nav a: hover, nav a: active {
цвет фона: #fff;
}
nav {
высота: 40 пикселей;
ширина: 100%;
фон: # 000;
border-bottom: 2px solid #fff;
{
цвет: #fff;
дисплей: встроенный блок;
ширина: 100 пикселей;
тень текста: 1px 1px 0px # 000;
}
ul {
отступы: 0;
поле: 0 авто;
}
li: last-child {
{
граница-право: 0;
}
}
li {
дисплей: встроенный;
плыть налево;
{
border-right: 1px solid #fff;
коробчатые проклейки: пограничный ящик;
}
}
}

Как мы видим выше, наш старый CSS теперь вложен как в LESS.

ограничение

Однако мы также можем видеть некоторые ограничения в результатах преобразования. В старом CSS у нас есть несколько одинаковых цветов, например, в этих двух объявлениях border-bottom: 2px solid #fff; и border-right: 1px solid #fff; у нас есть обе границы в белом. В LESS мы можем хранить это постоянное значение в переменной.

Он также не гнездится и не разделяет псевдо-* с символом амперсанда (&), например, в следующих правилах li: last-child и nav a: hover, nav a: active. Они просто остаются такими, как есть, где мы действительно можем упростить наборы правил таким образом;

li {
&:Первый ребенок {

}
{
&: hover {

}
&: active {

}
}
}

Вывод

Несмотря на существующие ограничения, этот инструмент может помочь сэкономить наше время на вложение наборов правил CSS. Остальное нужно сделать только вручную; возможно, пока не будут устранены вышеуказанные ограничения.