sass less что это
SASS или LESS что лучше начать учить
В этой статье я бы хотел разобрать, что лучше начать учить в 2020 году, SASS или LESS, надеюсь статья для вас будет полезна, и вы найдёте здесь ответ на свой вопрос.
Что такое SASS и LESS:
Для начала хочу рассказать что такое SASS и LESS, для тех кто не знает.
Тут всё просто, это препроцессоры CSS, которые должны упростить работу со стилями, но об этом может в другой статьи.
Сравнение SASS и LESS:
Теперь перейдём к самому сравнению этих двух технологий.
Подробнее о каждом:
SASS (Syntactically Awesome Stylesheets) — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей.
Был создан в 2006 году, не большой командой разработчиков, но главный автор этого языка Хамптон Катлин (англ. Hampton Catlin).
Также стоит упомянуть, что у SASS есть два синтаксиса, что может показаться на первый взгляд удобно, но об этом ниже
Этот язык был создан в 2009 году, силами человека по имени Алексис Селье (англ. Alexis Sellier).
Также надо сказать, что сейчас его разработка прикрашена, ещё в 2016 году, но зато он перерос практически в отдельную JavaScript библиотеку, что усложнит его использование не подготовленному человеку, то есть не знающего JS.
Синтаксис:
Как говорилось выше у SASS есть два синтаксиса, первый это стандартный который был изначально, но он на мой взгляд не удобный и не понятный сразу, поэтому буду использовать второй, который был создан под влиянием LESS, называется SCSS.
Для LESS всё стандартно, покажу как использовать именно в обычно LESS, без JavaScript.
Попытаемся сделать эту картинку.
Сначала посмотрите как сделать это на SASS со синтаксисом SCSS.
Что такое препроцессоры css Sass и Less
В данной статье мы рассмотрим решение для ускорения сборки front-end вашего сайта и дальнейшей быстрой его переделки.
CSS препроцессор — это надстройка над CSS, которая добавляет ранее недоступные возможности для CSS, с помощью новых синтаксических конструкций.
Препроцессоры преобразуют код, написанный на препроцессорном языке, в чистый и валидный CSS-код. И на выходе мы получаем чистый, валидный, кроссбраузерный код.
Препроцессоры позволяют существенно ускорить написание css-кода, минимизировать его и облегчают его поддержку. Препроцессоры превносят в css такие вещи как переменные, вложенность конструкций, наследование, миксины, циклы, ветвления и многое другое.
Представьте что вы ведете разработку крупного проекта и в какой-то момент меняется концепция фирменного стиля сайта (хотя это справедливо и не только для крупных проектов). По новой концепции вам требуется заменить все цвета и оттенки старого сайта на совершенно другие. Тогда ваша работа сводится к долгому и муторному поиску всех вхождений старых цветов в файлы стилей и переопределение их новыми. Если Вы являетесь специалистом, то Вам будет попросту жаль потерянного времени и в следующий раз Вы будете искать решения чтобы ситуация не повторилась. А решение есть и в этой статье мы его рассмотрим.
Препроцессоры css
Препроцессоры css — это технологии, созданные с целью расширить функционал привычных нам файлов стилей (css)
Существует несколько популярных css препроцессоров таких как Sass и Less. Разумеется их гораздо больше.
у этих препроцессоров похожий принцип — создаётся файл с уникальным расширением и после его компиляции на его основе строится привычный нам файл css. Для его изменения мы также открываем файл препроцессора, изменяем его и после компиляции у нас изменяется и файл css.
Препроцессоры мы используем на стороне разработки и разворачивать их на стороне сервера не стоит.
Схема работы препроцессора css
Преимущества препроцессоров css
Использование переменных изменение значение одной переменной влечёт изменение значений сразу нескольких правил css где это значение встречалось.
Сокращение кода благодаря правилам вложенности удаётся существенно сократить и оптимизировать код, что ускоряет его загрузку.
Удобство редактирования кода дорабатывать код стало гораздо проще.
SASS против LESS
«Какой препроцессорный язык стоит использовать для CSS?» является очень актуальным вопросом в последнее время. Несколько раз меня спрашивали об этом лично, и казалось бы, каждые пару дней этот вопрос поднимался в сети. Очень приятно что беседа перешла из темы о плюсах и минусах препроцессинга к обсуждению какой же язык является лучшим. За дело!
Если быть кратким: SASS.
Немного развернутый ответ: SASS лучше по всем пунктам, но если вы уже счастливы с LESS — это круто, по крайней мере вы уже упростили себе жизнь используя препроцессинг.
Развернутый ответ: ниже
График обучения с Ruby и командной строкой
Единственным пунктом является синтаксис. Для компиляции созданных вами файлов стоит использовать такое приложение как CodeKit. Вы должны знать основы Ruby или командной строки или еще чего-то другого. Наверное вам стоит это знать, но не обязательно, так что это не играет большой роли.
В помощь CSS3
С любым из языков вы можете создавать собственные примеси для упрощения жизни с префиксами. Так что здесь нет победителя. Но знаете ли вы как сделать так, чтобы не обновлять эти префиксы во своих своих проектах? (Нет, не знаете). Также вам, скорей всего, не придется обновлять ваш собственный файл с примесями. SASS позволяет использовать Compass, благодаря автообновлениям которого вы можете забыть о проблемах с префиксами. Конечно же вы можете обновлять программное обеспечение и время от времени его компилировать, но это тривиальная задача и не стоит на этом зацикливаться.
Так что все это сводится к следующему: у SASS есть Compass, а у LESS его нет. На самом деле все немного запутанней. Все попытки создать проект типа Compass для LESS потерпели неудачу. Дело в том, что LESS не является достаточно сильным языком, что бы сделать это корректно. Немного подробней будет ниже.
Способности языка: логика/циклы
LESS позволяет создавать «защищенные примеси». Эти примеси вступят в силу только в случае если условие верно. Допустим вы захотите поменять цвет фона, который будет зависеть от текущего цвета текста. Если цвет текста «достаточно светлый» вы, наверное, захотите сделать темный фон. Если же он «достаточно темный» — вы захотите светлый фон. Таким образом у вас получится примесь, разбитая на две части с этими «защитниками», которые гарантируют что только один из них будет исполнен.
После использования вы получите подходящий фон:
Это очень просто, но суть, надеюсь, понятна. Вы можете делать вещи гораздо круче этого. LESS также позволяет делать ссылающейся на себя рекурсии, примеси которых могут вызывать самих себя с обновленными значениями.
На этом логика/циклы в LESS и заканчиваются. SASS обладает актуальными логическими и циклическими операторами. if/then/else, цикл for, цикл while и цикл each. Без каких либо трюков, настоящее программирование. SASS является достаточно надежным языком, что делает возможным использование Compass.
Лаконичный кусок кода:
Превращается этот код в монстра ниже (который, к сожалению, нужен в целях кроссбраузерности):
Сайты
Сайт LESS более красив и удобен. Нельзя сказать что документация SASS ужасна, она достаточно хорошо наполнена и вы можете найти в ней все что душа пожелает. Но как показывает практика, фронтенд разработчика привлекает красивый интерфейс, что дает LESS преимущество. Бесспорно, это играет большую роль и LESS выигрывает эту партию. Хотя все может поменяется.
@extend концепция
Допустим вы создали класс с неким набором стилей. Затем вам понадобится создать еще один, который будет как предыдущий, но с некими дополнениями. LESS позволяет сделать это так:
Вы это видите? SASS переопределяет селекторы, и это более эффективный путь.
Обработка переменных
SASS имеет странное свойство — если вы переопределите «глобальную» переменную «локальной», глобальная переменная примет ее значение. Немного странно.
Это трюк может быть полезным, но он совсем не интуитивен, особенно если вы пишете на Javascript.
Победитель: надо бросить монетку 🙂
Работа с правилами media
С помощью SASS или LESS вы можете объединить эти стили используя вложения.
«respond-to» — довольно таки крутая техника SASS (ознакомьтесь с кодом Chris Eppstein, Ben Schwarz, и Jeff Croft).
Дальше использовать их можно очень лаконично:
Метематика
В основном, математическая часть в обеих языках довольно похожа, но все же есть некоторые странности при обработке единиц измерения.
Например, LESS возьмет за единицу измерения значение первой переменной, игнорируя все остальные.
SASS позволяет проводить математические операции с «неизвестными» единицами измерения, которые могут появиться до следующего обновления. LESS этого не позволяет. Есть еще более странные отличия, например, как SASS умножает числа с единицами измерения, но об этом не сегодня.
Победитель: SASS (с натяжкой)
Развитие
За время написания статьи…
Количество коммитов за последний месяц LESS: 11
Количество коммитов за последний месяц SASS: 35
Ни один из этих пунктов не может твердо определить какой же проект является более активным, но, кажется, цифрам больше нравится SASS. Насколько я понял, главные разработчики обеих языков, продолжают работать над этими проектами, как только у них появляется немного свободного времени между разработкой других новых, не менее важных проектов.
Краткий обзор отличий LESS от SASS
Вчера пол дня потратил на подробное изучение LESS и его отличие от используемых нами SASS/SCSS.
Синтаксис SASS мне импонирует больше чем SCSS за его краткость. Но большая вложенность стилей в SASS может быстро ликвидировать все преимущества его краткости. В любом случае разницу между SASS и SCSS не принципиальна. LESS оказался ближе к SCSS чем к SASS. И, в общем, это тоже самое. Отличий не много, но парочка из них принципиально меняют расстановку сил.
1. LESS — может client-side с использованием JS.
Точнее он не то чтобы может, он на это и расчитан. Обычная практика использования LESS-кода:
Это потом уже к нему прикрутили возможность компиляции на сервере (и на js и на ruby).
На первый взгляд какое-то странное свойство. Зачем компилить на стороне клиента, если можно отлично скомпилить на сервере и отдавать уже готовую ужатую CSS как мы привыкли с SASS?
Причина становится видна после изучения невзрачных самых послених строках документации к LESS:
Вот такая маленькая одинокая строчка дает возможности о которых только мечтали верстальщики с начала освоения стилей. Вызов из CSS ява-скрипта на стороне клиента и учет фактических параметров браузера при создании стилей.
Тоесть у нас появилась возможность сначала загрузить DOM, а потом под него создать специальный CSS прямо на стороне клиента. Дальше сами думаейте какие возможности этот открывает.
Нужно ли это вашему проекту это вопросу другой. Понятно что все привыкли к клиентской неизвестности/независимости и верстке в стиле «делаем универсально, чтобы более-менее показывалось у всех на всех разрешениях». Но это не повод забывать что теперь такая возможность есть и с ней вы можете делать, к примеру, ну очень резиновую верстку.
2. LESS, в отличии от SASS/SCSS не имеет логики.
В LESS нет if/then, for и т.п. Хотя, учитывая то, что в него легко встраивается JS думаю логику вполне возможно прикрутить. Не пробовал.
3. В LESS проще миксинг + миксить можно классы.
Очень понравилось то, что в LESS можно включать в определение свойства других классов. Собственно класс и является миксином. Это еще одна особенность которой нет в SASS/SCSS. Вы можете включить в LESS обычный CSS файл и использовать его классы для определия своих свойств. Например:
Резюме
За исключением 1-го пункта разница не велика и выбор большена любителя.
Лично для меня LESS выглядит более привлекательным из-за своей простоты. Циклы и условия в стилях мне еще никогда не были нужны. Классические утилиты типа «box-shadow, linear-gradient, darken’ в LESS есть.
Да, под SASS написано уже множество готовых библиотек (compass, bourbone и достаточно широкое сообщество), но под LESS есть тот же Twitter Bootstrap и этого более чем достаточно.
CSS-препроцессоры
Если рассматривать препроцессоры вместе с CSS, то получается картина более понятная, нежели чем рассматривать понятие препроцессора отдельно.
Определение
CSS препроцессор (от англ. CSS preprocessor) — это надстройка над CSS, которая добавляет ранее недоступные возможности для CSS, с помощью новых синтаксических конструкций.
Основная задача препроцессора — это предоставление удобных синтаксических конструкций для разработчика, чтобы упростить, и тем самым, ускорить разработку и поддержу стилей в проектах.
CSS препроцессоры преобразуют код, написанный с использованием препроцессорного языка, в чистый и валидный CSS-код.
При помощи препроцессоров вы можете писать код, который нацелен на:
И это лишь малая часть того, что может дать вам препроцессор. Но не стоит забегать вперёд.
Синтаксический сахар
Перед тем, как перейти к дальнейшему рассмотрению CSS-препроцессоров, давайте обновим наш лексикон новым понятием — «синтаксический сахар».
Синтаксический сахар (от англ. syntactic sugar) — это дополнения синтаксиса языка программирования, которые не вносят каких-то существенных изменений или новых возможностей, но делают этот язык более читабельным для человека.
Синтаксический сахар вводит в язык альтернативные варианты записи заложенных в этот язык конструкций. Под альтернативными вариантами записи стоит понимать более короткие или удобные конструкции для человека, которые в конечном итоге будут преобразовываться препроцессором в исходный язык, без синтаксического сахара.
Если попытаться применить это понятие к CSS-препроцессорам, то оно, в общем случае, полностью описывает их суть. Ещё раз напомню, что основной задачей препроцессоров является упрощение и ускорение разработки, а как это ещё можно сделать, если не ввести альтернативные варианты записи?
Какие бывают CSS-препроцессоры?
Пора перейти к более конкретным примерам, а именно к самим CSS-препроцессорам. На момент написания книги можно выделить три популярных препроцессора:
И несколько незначительных для нас игроков:
О первой тройке мы поговорим отдельно немногим ниже, а вот о двух последних разговора вообще не будет, в виду их непопулярности. При желании, описания этих препроцессоров с лёгкостью можно найти в поисковике.
Какой смысл использования препроцессоров?
Как я уже отметил выше, основные плюсы — это читабельность кода, структурирование и повышение производительности.
Существуют также и другие причины того, чтобы начать использовать препроцессор уже сегодня. Я хочу заострить на этом внимание, так как разработчики раньше, да многие и сейчас, отнекиваются от использования препроцессоров, находя их сложными, непонятными и ненужными.
CSS — это сложно
Стандартный CSS — это сложно. Синтаксис без использования вложенности, которую предлагают CSS-препроцессоры, просто напросто сложен для зрительного восприятия. Кроме того, нужно помнить имя родителя при вложенности. Отсутствие нормальных переменных и «функций» делает CSS-код грязным и узконаправленным.
Доступная документация
Прошли те времена, когда документация от препроцессоров была доступна только людям «в теме». Сейчас любой желающий может в кратчайшие сроки освоить любой из препроцессоров, причём с минимальными затратами сил.
Простота использования
Использовать препроцессоры стало проще, чем раньше, причём намного проще. Для этого нужно лишь установить программу, которая будет следить за файлами, предназначенными для препроцессора, и при их изменении будет компилировать содержимое этих файлов в чистый CSS-код.
Для более продвинутых пользователей есть специальные сборщики проектов. Не думайте, что если вы используете программу для препроцессоров, а не сборщик проектов, то вы недостаточно круты. На самом деле, такие сборщики предлагают полный контроль и расширенные настройки, а не делают из вас джедая.
Структура и логичность кода
Самым популярным предлагаемым функционалом любого CSS-препроцессора является возможность вкладывать селекторы друг в друга. Я не буду сейчас приводить пример, так как о возможностях Less, включая вложенность, будет написана соответствующая часть книги. На этом этапе вам стоит знать лишь то, что при использовании препроцессоров, можно вкладывать один селектор в другой, а другой в третий, получая что-то, похожее на оглавление книги:
Конечно, в реальной жизни селекторы не могут начинаться с цифр, однако, для проведения параллели между вложенностью и оглавлением, думаю такое упущение здесь уместно.
Примеси
Если говорить совсем кратко, то, используя примеси (от англ. Mixins), можно сделать код переиспользуемым. Это помогает избежать вспомогательных классов в разметке или дублирования свойств от селектора к селектору.
Модульность
Еще одним бонусом, который прямо сейчас уговорил бы меня начать пользоваться CSS-препроцессором, будет возможность вкладывать файлы в файлы, то есть проще говоря, производить конкатенацию файлов в заданной последовательности. Да, это можно организовать и на чистом CSS, но вкупе с другими возможностями получается очень мощный инструмент.
При этом мы получаем возможность делиться модулями (библиотеками примесей), которые создали для своих нужд и посчитали полезными для других людей. Получается, что любой разработчик может загрузить вашу библиотеку и использовать её в своих целях, вызывая по мере необходимости написанные вами примеси.
Почему бы не подождать развития CSS?
Развитие CSS идёт очень маленькими и неуверенными шагами, так как W3C придерживается приоритета скорости срабатывания CSS (производительности). С одной стороны это правильно и очень важно, но с другой — это отсутствие удобства для разработчиков.
В пример поставлю одну из спецификаций CSS4, которую ввели под давлением разработчиков — селектор по родителю. Столь долгий путь от идеи до принятия решения был из-за того, что W3C считало такой селектор медленным и дальнейшее его использование на сайтах привело бы к диким тормозам. Конечно же, речь идёт о повсеместном применении этого селектора, а не о единичных случаях.
Так что не стоит ждать в ближайшее время революций и изменений, способных затмить функционал и возможности CSS-препроцессоров.
Разновидности препроцессоров
Разумеется, как и в любой другой области, всегда есть конкуренция, и на рынке препроцессоров сейчас три главных, враждующих между собой лагеря:
Враждующими я их называю, потому что каждый приверженец одного из препроцессоров считает своим долгом поливать нечистотами представителей других, скажем так, конфессий. Такая неприязнь особенно часто проявляется у любителей препроцессора Sass, который считается старейшим и мощнейшим из всех трёх препроцессоров.
Для полной картины, я хочу привести краткую справку по каждому препроцессору:
Собственно, герой этой книги. Самый популярный на момент написания книги препроцессор. Основан в 2009 году Алексис Сельер (Alexis Sellier) и написан на JavaScript (изначально был написан на Ruby, но Алексис вовремя сделал правильный шаг). Имеет все базовые возможности препроцессоров и даже больше, но не имеет условных конструкций и циклов в привычном для нас понимании. Основным плюсом является его простота, практически стандартный для CSS синтаксис и возможность расширения функционала за счёт системы плагинов.
Sass (SCSS)
Самый мощный из CSS-препроцессоров. Имеет довольно большое сообщество разработчиков. Основан в 2007 году как модуль для HAML и написан на Ruby (есть порт на C++). Имеет куда больший ассортимент возможностей в сравнении с Less. Возможности самого препроцессора расширяются за счёт многофункциональной библиотеки Compass, которая позволяет выйти за рамки CSS и работать, например, со спрайтами в автоматическом режиме.
Имеет два синтаксиса: