В этой статье я бы хотел разобрать, что лучше начать учить в 2020 году, SASS или LESS, надеюсь статья для вас будет полезна, и вы найдёте здесь ответ на свой вопрос.
Что такое SASS и LESS:
Для начала хочу рассказать что такое SASS и LESS, для тех кто не знает.
Тут всё просто, это препроцессоры CSS, которые должны упростить работу со стилями, но об этом может в другой статьи.
Сравнение SASS и LESS:
Теперь перейдём к самому сравнению этих двух технологий.
Подробнее о каждом:
SASS (Syntactically Awesome Stylesheets) — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей.
Был создан в 2006 году, не большой командой разработчиков, но главный автор этого языка Хамптон Катлин (англ. Hampton Catlin).
Также стоит упомянуть, что у SASS есть два синтаксиса, что может показаться на первый взгляд удобно, но об этом ниже
Подробнее о SASS во Википедии>
LESS (Leaner Style Sheets, компактная таблица стилей)— это динамический язык стилей. Он создан под влиянием языка стилей SASS, и, в свою очередь, оказал влияние на его новый синтаксис «SCSS», в котором также использован синтаксис, являющийся расширением СSS.
Этот язык был создан в 2009 году, силами человека по имени Алексис Селье (англ. Alexis Sellier).
Также надо сказать, что сейчас его разработка прикрашена, ещё в 2016 году, но зато он перерос практически в отдельную JavaScript библиотеку, что усложнит его использование не подготовленному человеку, то есть не знающего JS.
Подробнее о LESS во Википедии>
Синтаксис:
Как говорилось выше у SASS есть два синтаксиса, первый это стандартный который был изначально, но он на мой взгляд не удобный и не понятный сразу, поэтому буду использовать второй, который был создан под влиянием LESS, называется SCSS.
Для LESS всё стандартно, покажу как использовать именно в обычно LESS, без JavaScript.
Попытаемся сделать эту картинку.
Сначала посмотрите как сделать это на SASS со синтаксисом SCSS.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | @mixin displayAt($vertical, $horizontal) { @if($vertical == top) { top: 0; } @else if($vertical == bottom) { bottom: 0; } @if($horizontal == left) { left: 0; } @else if($horizontal == right) { right: 0; } } .toastMessage { @include displayAt(bottom, right); } .toastMessage { width: 200px; position: absolute; background: #BBF5BB; border: 1px solid #99C995; border-radius: 6px; box-shadow: 0 6px 12px rgba(0,0,0,0.17); padding: 10px; margin: 20px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 13px; } |
Теперь LESS.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | .displayAt(@position) when (@position = top) { top: 0; } .displayAt(@position) when (@position = bottom) { bottom: 0; } .displayAt(@position) when (@position = left) { left: 0; } .displayAt(@position) when (@position = right) { right: 0; } .toastMessage { .displayAt(bottom); .displayAt(right); } // Purely cosmetic. .toastMessage { width: 200px; position: absolute; background: #BBF5BB; color: #478342; border: 1px solid #99C995; border-radius: 6px; box-shadow: 0 6px 12px rgba(0,0,0,0.17); padding: 10px; margin: 20px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 13px; } |
Как можете заметить, в LESS программа на две строчки больше, что не значительно, когда нужно сверстать совсем не много, но может быть существенно во время вёрстки целого шаблона.
Также, на личный взгляд SASS более простой, за счёт наличия подобии функции, как в других языках программирования, да и вообще его синтаксис не много напоминает обычные языки программирования.
Работа:
Самое главное, это сколько вакансий можно найти по каждой технологии.
SASS всего 223 вакансии, что не так много, как я думал на момент 4 Января 2020 года, LESS же 283 вакансии, что в больше, это всё по Москве.
Но надо сказать, что это не имеет большого значения что вы изучите в начали, так как, эти технологии достаточно простые и много времени не займёт их изучение.
Вывод:
Пришло время подвести итоги, на мой взгляд нужно изучать SASS, потому что его второй синтаксис не много проще и синтаксис меньшие кода требует для вёрстки.
Но как говорилось выше, изучить препроцессор не составит труда, вы сможете быстро изучить их, поэтому нет особой разницы, что сначала учить.
Также если вы хотите изучить SASS, то посмотрите статью: Установка sass через path.
Подписываетесь на соц-сети:
Оценка:
Средняя оценка: 4,17
Загрузка...