is_реклам:

пошук, категорії та ін. показати ▼

Як конвертувати CSS в Less

Як конвертувати CSS в Less
автор опубліковано

Раніше ми уже познайомилися з LESS - препроцесором CSS, детальніше у "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 і може зберегти час для вирішення інших завдань.

Джерело: www.hongkiat.com/blog/css-to-less/

схоже за тегами

1 коментар

  1. Ось іще один сервіс який дозволяє виконувати подібні речі
    http://leafo.net/lessphp/lessify/

Залишити коментар:

Яндекс цитирования UA TOP Bloggers