Конвертируем CSS в LESS

Этот урок связан с проектом Используем LESS

Конвертируем CSS в LESS

В предыдущем уроке серии мы познакомились с LESS - препроцессором CSS, существенно улучшающим возможности разработчика. Но что делать с имеющимися наработками? Есть решение для конвертации CSS кода в LESS.

CSS код

 

Инструмент

С ростом популярности препроцессора CSS появляются новые инструменты и приложения, облегчающих жизнь разработчика. Один из таких инструментов CSS2Less.

Данный инструмент позволяет конвертировать обычный код CSS в LESS. Давайте попробуем. Возьмем код CSS.

nav {
	height: 40px;
	width: 100%;
	background: #000;
	border-bottom: 2px solid #fff;
}
nav ul {
	padding: 0;
	margin: 0 auto;
}
nav li {
	display: inline;
	float: left;
}
nav a {
	color: #fff;
	display: inline-block;
	width: 100px;
	text-shadow: 1px 1px 0px #000;
}
nav li a {
	border-right: 1px solid #fff;
	box-sizing:border-box;
}
nav li:last-child a {
	border-right: 0;
}
nav a:hover, nav a:active {
	background-color: #fff;
}

И вот что получим в итоге:

Код LESS

nav a:hover, nav a:active {
    background-color: #fff;
}
nav {
    height: 40px;
    width: 100%;
    background: #000;
    border-bottom: 2px solid #fff;
    a {
        color: #fff;
        display: inline-block;
        width: 100px;
        text-shadow: 1px 1px 0px #000;
    }
    ul {
        padding: 0;
        margin: 0 auto;
    }
    li:last-child {
        a {
            border-right: 0;
        }
    }
    li {
        display: inline;
        float: left;
        a {
            border-right: 1px solid #fff;
            box-sizing:border-box;
        }
    }
}

Вот так старый код CSS становится структурированным кодом LESS.

 

Ограничения

Однако есть некоторые ограничения при конвертации.

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

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

 

Заключение

Несмотря на ограничения, инструмент вполне пригоден для обработки кода CSS и может сохранить время для решения других задач.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.hongkiat.com/blog/css-to-less/
Перевел: Сергей Фастунов
Урок создан: 19 Октября 2012
Просмотров: 21094
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 25 Октября 2012 23:35
    Revy
    Офигенная вещь этот LESS!
  • 26 Октября 2012 15:26
    Septor
    Так к теме небольшое дополнение: Конвертер CSS to Less - http://leafo.net/lessphp/lessify/ Плюс - sass-convert тоже самое сделает пример - "sass-convert -F css -T scss style.css > style.less lessc style.less" Плюс http://toki-woki.net/p/least/ переводит как в less, так и в SCSS и Stylus Есть и другие, но везде нужно потом руками дорабатывать
  • 7 Марта 2013 20:19
    ImSun
    хорошая вещь LESS!!! понравился очень удобно писать на нем да и код стилей становиться более понятным но вот проблема при тесте на браузерах только FF его отображал... остальные такие как Opera и Google Chrome не хотят... есть возможность как то их заставить дружить с LESS???
  • 5 Января 2014 20:31
    shatun
    У вас все ссылки на источники уроков в виде
    http://ruseller.com/www.ИСТОЧНИК
    Видимо
    $_SERVER[]
    ...
^ Наверх ^