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

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

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

 

Инструмент

С ростом популярности препроцессора 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;
}

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

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 и может сохранить время для решения других задач.


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/UkCFxXBYYco/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Конвертируем CSS в LESS | | 2012-10-25 05:08:30 | | Статьи Web-мастеру | | Этот урок связан с проектом Используем LESSВ предыдущем уроке серии мы познакомились с LESS - препроцессором CSS, существенно улучшающим возможности разработчика. Но что делать с имеющимися | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: