Пишем CSS используя SASS(SCSS) и LESS

Если у вас возникало желание сократить ваш CSS код или сделать его более универсальным и легким к изменением, тогда информация в данной статье будет для вас полезна. В принципе если такого желания у вас и не  было, информация все-равно будет полезна 🙂

1. LESS

LESS - Динамический язык стилевой разметки

LESS - динамический язык стилевой разметки. Данный препроцессор обладает наиболее близким к CSS синтаксисом, возможно именно по-этому на изучения LESS у вас уйдет не более часа 🙂

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

В принципе, можно использовать LESS для ускорения создания стилей, скомпилировать его в CSS на локальной машине, а в проекте использовать только CSS.

LESS удобно применять при написании CSS3 кода, который каждый браузер поддерживает со своими префиксами. Также существуют уже готовые библиотеки готовых функция для LESS.

 

 2. SASS (SCSS)

SCSS

Что касается SASS, то он тоже расширяет возможности обычного CSS. SASS имеет два основных синтаксиса: старый - SASS и новый - SCSS, в принципе это и вся разница между ними. Еще добавлю, что синтаксис SCSS более близок к родному синтаксису CSS.

В сравнении с LESS, SASS имеет более широкий функционал. Ранее можно было говорить, что у LESS приятнее синтаксис, но с выходом SCSS ...

Прилагаю ссылку на официальный сайт:

 

 Подытожу

SASS и LESS действительно облегчают рутинный процесс создания и изменения стилей сайта. Также в отношение данный препроцессоров есть не одна библиотека с уже готовыми функциями, о которых я в скором времени также напишу.

И завершая свою статью, хочу дать небольшой совет, не спешите искать информацию на русском языке о применении SASS и LESS, вначале тщательно изучите официальные ресурсы, которые я представил выше, особенно это касается SASS. Приятного вам коддинга 🙂

(2 голосов. Рейтинг: 5,00 из 5)
Загрузка...

Метки: , , ,

Рубрика: CSS

Оставьте свой комментарий