Краткий обзор отличий 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 и этого более чем достаточно.
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?
Оценить 1 комментарий
При правильном использовании, LESS и S(A|C)SS позволяют упростить исходный код, облегчить процесс разработки стилей.
Из минусов:
0. Сложность поддержки. Нельзя просто взять и поменять стили, их придется пересобирать.
1. Видел много излишне сложных «стилевых» проектов. Не понимаю, как элементарные вещи можно так сильно усложнять 🙂
2. Повышаются требования к front-end разработчику, и, как следствие, стоимость работ. Школьника для такой работы уже нанять не получится.
Что в итоге произошло. В один прекрасный момент какие-то там рубисты придумали SCSS (они вообще не любят все что не в стиле ruby в плане минимализма и выразительности). Затем чуваки подумали и сказали, SCSS это круто но почему-то они используют синтаксис знакомый именно Ruby разработчикам а не обычные для CSS конструкции. В итоге реализовали LESS, причем его уже реализовали на javascript, что с наличием node.js позволило это все добро еще на одной платформе собирать. А так как под эту платформу и так плодили препроцессоры оно удачно вписалось.
Далее уже шли какие-то модификации дальнейшие, вроде того же Stylus, где синтаксис упростили просто до нельзя.
Личное мнение. На сегодняшний день я не вижу смысла использовать чистый CSS хоть на малых хоть на больших проектах. Вот вообще никакого.
CSS-препроцессоры и преимущество их использования
December 05, 2013
Статья на NetTuts+, написанная Johnathan Croom в 2012 году.
Введение
Существуют множество преимуществ, которые привносят препроцессоры в таблицы стилей CSS и в этой статье мы рассмотрим только некоторые из них, как хорошо известные, так и мало распространенные. Давайте приступим к обзору.
Синтаксис
Наиболее важной частью при написании кода в любом препроцессоре CSS является его синтаксис. В счастью для нас, синтаксис всех трех препроцессоров, которые мы будем рассматривать, имеют CSS-подобный вид.
Sass & LESS
Вид обычного файла в синтаксисе Sass или LESS представлен ниже:
Хорошо видно, что это обычный синтаксис CSS, который прекрасно конвертируется в Sass (SCSS) или LESS.
Важно обратить внимание, что Sass (SCSS) также имеет старую версию синтаксиса Sass, в которой опущены точки с запятой и фигурные скобки.
Несмотря на то, что такой синтаксис все еще можно применять на практике, он является устаревшим и мы не будем использовать его в наших примерах.
Синтаксис Sass (старая версия) выглядит следующим образом:
Stylus
Примеры синтаксиса Stylus:
Все варианты синтаксиса, показанные выше, являются валидными и в результате компиляции получается правильный CSS-код. Например, такой код скомпилируется в стандартный CSS без ошибок:
Переменные
В препроцессорах переменные объявляются и используются внутри файлов стилей CSS. Переменные могут принимать любое значение, допустимое в CSS (цвет, число или текст) и может ссылаться из любого места CSS-документа.
Переменные в LESS точно такие же, как и в Sass, за исключением того, что перед именем переменной ставится символ @ :
Stylus
Другими словами, не выполняется такая операция:
Скомпилированный CSS
Каждый из представленных в виде примера файлов компилируется в точно такой же CSS-код. Вы можете включить воображение, чтобы представить, насколько полезными могут быть переменные.
Благодаря им отпадает необходимость задавать значение цвета и потом двадцать раз повторять его в CSS-коде. Или же поставлена задача изменить ширину сайта и для этого необходимо “перерыть” код в поисках этой величины.
Прим. переводчика: здесь автор немного утрирует ситуацию, так как в любом нормальном редакторе кода имеется функция поиска.
Ниже представлен CSS-код после выполнения компиляции:
Вложенность (nesting)
Вместо этого, используя возможности препроцессора, мы можем поместить все дочерние селекторы внутри скобок элемента-родителя. Кроме того, символ & является ссылкой (сокращением) на селектор элемента-родителя.
Sass, LESS & Stylus
Все три препроцессора имеют абсолютно одинаковый синтаксис для вложенных селекторов:
Скомпилированный CSS
Подмешивания (mixins)
Миксины mixins являются функциями, которые позволяют многократно использовать сгруппированные свойства внутри CSS-кода. Вместо того, чтобы просматривать весь код в поисках нужных строчек для их изменения, теперь можно вносить изменения только один раз, внутри миксина.
Применение подмешиваний особенно оправдывает себя при создании специфичных стилей для элементов или простановке браузерных префиксов. Когда миксин вызывается внутри CSS-селектора, происходит распознавание аргументов этого миксина, затем его стили применяются к селектору, который его вызвал.
Прим. переводчика: в приведенных ниже примерах стоит обратить внимание на разницу в синтаксисе объявления и вызова миксина внутри CSS-селектора для всех трех препроцессоров.
Style
Скомпилированный CSS
Результатом компиляции из всех трех препроцессоров будет одинаковый CSS-код:
Наследование (inheritance)
При написании CSS стилей “классическим” способом, для того чтобы применить одни и те же свойства к нескольким элементам в HTML-документе, нам следовало бы создать такой код:
Все работает прекрасно. Но если потребуется написать стили отдельно для любого из этих селекторов, нужно будет создавать отдельные правила для каждого из них. И сразу же код таблиц стилей становиться неряшливым и трудно поддерживаемым.
Sass & Stylus
Скомпилированный CSS
Препроцессор LESS не поддерживает наследование в полной мере так, как это организовано в Sass или Stylus. Вместо добавления множественных селекторов в один набор свойств, наследование трактуется как миксин без аргументов.
Импорт стилей выполняется для каждого селектора. Обратной стороной такого подхода является постоянное повторение строк со свойствами в компилированном CSS-стиле.
Вот как может выглядеть LESS-код с наследованием:
Скомпилированный CSS
Импортирование
В CSS-сообществе к импортированию стилей с помощью директивы @import существует стойкое негативное отношение, так как такой подход порождает множественные HTTP-запросы к серверу, что замедляет работу браузера и нагружает сам сервер. Однако, в препроцессорах технология импортирования работает иначе.
В любом из трех препроцессоров импортирование одного файла внутрь другого фактически приводит к вставке кода одного файла в другой при компиляции, в результате которой получается один CSS-файл.
Прим. переводчика: другими словами, в препроцессорах импортирование необходимо для компиляции одного файла из нескольких. В стандартном CSS импортирование приводит к подстановке одного кода внутрь другого.
Обратите внимание, что при компилировании файла со стандартным подключением с помощью директивы @import «file.css» внутри него компиляции последнего не происходит. А вот миксины или переменные импортируются и используются в стилевом файле, как положено. Технология импортирования очень удобная, так как она позволяет создавать множество отдельных файлов для правильной организации проекта.
Скомпилированный CSS
Функции работы с цветом
“Цветовые” функции созданы для трансформации цвета при компиляции. Такие функции чрезвычайно полезны при создании градиентов, затемнения цвета при hover и многое другое.
Представленный выше код является всего лишь кратким списком функций работы с цветом в Sass. Полный список всех доступных функций расположен по адресу Sass Documentation.
Список функций препроцессора LESS находится на официальном сайте проекта LESS Documentation.
Ниже показан пример того, как можно применять “цветовые” функции в LESS:
Stylus
Полный список всех функций работы с цветом препроцессора Stylus представлен на сайте проекта Stylus Documentation.
И пример использования “цветовой” функции в Stylus:
Арифметические операции
Благодаря препроцессорам выполнение арифметических операций внутри CSS-кода теперь осуществляется просто и легко. Такая возможность часто бывает полезной.
Sass, LESS & Stylus
Практические примеры
Вот мы и рассмотрели основные моменты того, что и как умеют делать все три препроцессора. Однако мы еще ни разу не коснулись момента практического применения этих возможностей. Ниже показан список реальных веб-приложений, в которых используются препроцессоры, заметно улучшая при этом весь код.
Браузерные префиксы
Одним из наиболее ярких примеров преимущества использования препроцессоров является написание с их помощью свойств с браузерными префиксами. Один раз создав миксин с поддержкой браузерных префиксов, мы избавляем себя от рутинной работы.
Например, создадим для всех трех препроцессоров миксин скругления углов блока:
Stylus
Скомпилированный CSS
Трехмерный текст
Создание эффекта трехмерности для текста с помощью CSS-свойства text-shadow является прекрасной идеей. Единственная проблема заключается в работе с цветом, которая достаточно трудная и обременительная.
Используя миксины и функции для работы с цветом, мы можем создать объемный текст и изменять его цвет на лету:
Stylus
В примере для Stylus я выбрал вариант написания свойства text-shadow в одну строку, так как здесь я опустил фигурные скобки.
Скомпилированный CSS
Колонки
Использование переменных и числовых значений для этих переменных пришла мне в голову, когда я только начал знакомиться с возможностями CSS-препроцессоров. Объявление ширины для макета внутри переменной делает задачу изменения этой ширины (при необходимости) простой и быстрой:
Stylus
Скомпилированный CSS
Некоторые уловки препроцессоров
Существует несколько хитростей при работе с CSS-препроцессорами. В этой статье я расскажу только о некоторой части из них. Но если эта тема вас заинтересовала, я рекомендую вам внимательно прочитать официальную документацию или же, что еще лучше, просто начните пользоваться препроцессором каждый день в процессе кодинга.
Сообщение об ошибках
CSS-препроцессоры могут сообщать об ошибках в коде и заставить их поступать таким образом достаточно просто. В этом случае препроцессор сам сообщает вам, в каком месте CSS-кода находиться ошибка (и все счастливы).
Если вас заинтересовала подобная возможность во всех трех препроцессорах, то в этой статье подробно описано, как выполнить данную настройку.
Комментирование
В CSS-препроцессоре при компиляции из кода удаляются любые комментарии в виде двойного слеш’а ( // это комментарий ). Но, в тоже время, блочные комментарии ( /* это комментарий */ ) остаются в коде без изменений.
На заметку: при компиляции в минимизированную версию CSS-файла удаляются любые комментарии.
Заключение
Каждый из трех рассмотренный в этой статье CSS-препроцессоров (Sass, LESS и Stylus) обладает своим собственным, уникальным способом решения одной и той же задачи. Это дает в руки разработчика возможность выбора, каким способом выполнить поставленную задачу. Объединяет все препроцессоры способность расширить горизонты кодера с одновременным сохранением кросс-браузерности и чистоты кода.
Я советую вам попробовать все известные препроцессоры, чтобы на личном опыте вы выбрали для себя наиболее предпочтительный. Если же до этого момента вы писали код только на чистом CSS, я настоятельно рекомендую вам научиться работать хотя бы в одном из препроцессоров.
Russian (Pусский) translation by Liliya (you can also view the original English article)
В этой статье мы рассмотрим различные функции и преимущества использования трех разных препроцессоров: Sass, LESS и Stylus.
Вступление
Препроцессоры создают CSS, который работает во всех браузерах.
Синтаксих
Наиболее важной частью написания кода в препроцессоре CSS является понимание синтаксиса. К счастью для нас, синтаксис (или может быть) идентичен регулярному CSS для всех трех препроцессоров.
Sass & LESS
Как вы могли заметить, это просто обычный CSS, который отлично компилируется как в Sass, так и в LESS.
Stylus
Использование разных вариаций в одной таблице стилей также является допустимым, поэтому следующее будет компилироваться без ошибок.
Переменные
Переменные могут быть объявлены и использованы во всей таблице стилей. Они могут иметь любое значение, которое является значением CSS (например, цветами, числами [включенными единицами] или текстом.), и на них можно ссылаться везде в нашей таблице стилей.
LESS переменные точно такие же, как переменные Sass, за исключением того, что имена переменных добавляются символом @
Stylus
Скомпилированный CSS
Каждый из вышеуказанных файлов будет скомпилирован с тем же CSS. Вы можете использовать свое воображение, чтобы узнать, насколько полезны переменные. Нам больше не нужно будет менять один цвет и повторить его двадцать раз, или мы хотим изменить ширину нашего сайта и вынуждены его искать, чтобы найти его. Вот CSS после компиляции:
Nesting
Если нам нужно ссылаться на несколько элементов с одним и тем же источником в нашем CSS, это может быть утомительно писать его снова и снова.
Вместо этого, используя препроцессор, мы можем записать дочерние селекторы внутри скобок родителя. Кроме того, символ & обозначает родительский селектор.
Sass, LESS, и Stylus
Все три препроцессора имеют одинаковый синтаксис для селекторов вложенности.
Скомпилированный CSS
Это скомпилированный CSS из приведенного выше кода. Это точно так же, как то когда мы начали то что удобно!
Mixins
Stylus
Скомпилированный CSS
Все препроцессоры составляют один и тот же код:
Наследственность
При написании CSS старомодным способом мы могли бы использовать следующий код для одновременного применения одних и тех же стилей к нескольким элементам:
Sass & Stylus
Скомпилированный CSS (Sass & Stylus)
LESS действительно не наследует стили Sass и Stylus. Вместо добавления нескольких селекторов к одному набору свойств он рассматривает наследование как mixin без аргументов и импортирует стили в свои собственные селекторы. Недостатком этого является то, что свойства повторяются в вашей скомпилированной таблице стилей. Вот как вы его настроили:
Скомпилированный CSS (LESS)
Импортирующий
Sass, LESS, и Stylus
Скомпилированный CSS
Цветовые возможности
Цветовые функции встроены в функции, которые преобразуют цвет при компиляции. Это может быть чрезвычайно полезно для создания градиентов, более темных цветов и многое другое.
Это всего лишь короткий список доступных цветовых функций в Sass, полный список доступных цветовых функций Sass можно найти, прочитав документацию Sass.
Цветовые функции можно использовать в любом месте, где используется цвет. Вот пример:
Список всех функций LESS можно найти, прочитав LESS Документацию.
Вот пример использования цветовой функции в LESS:
Stylus
Полный список всех функций цвета Stylus можно найти, прочитав Документацию Stylus.
Вот пример использования цветовых функций Stylus:
Эксплуатация
Выполнение математики в CSS очень полезно и теперь вполне возможно. Это просто, и вот как это сделать:
Sass, LESS, и Stylus
Практическое применение
Приставка поставщиков
Stylus
Скомпилированный CSS
3D-текст
Stylus
Я решил написать текстовые тени Stylus на одной строке, потому что я опустил фигурные скобки.
Скомпилированный CSS
Конечный результат
Столбец
Stylus
Скомпилированный CSS
Известные причуды
Существует несколько приколов к использованию препроцессора CSS. Я собираюсь перечислить некоторые причуды, но если вам действительно интересно узнать все, я рекомендую вам изучать документацию или, еще лучше, просто начните использовать препроцессор в ежедневной кодировке.
Отчет об ошибках
Если вы написали CSS за какое-то приличное время, я уверен, что вы достигли точки, где вы где-то ошиблись, и просто не могли ее найти. Если вы похожи на меня, вы, вероятно, провели день, дергая свои волосы и комментируя различные вещи, чтобы найти ошибку.
Препроцессоры CSS сообщают об ошибках. Все просто. Если что-то не так с вашим кодом, он сообщает вам, где именно ошибка, и если вам повезло: почему. Ваш перевод будет отображаться на этом посте. Используйте левую сторону, чтобы ввести его.
Комментарии
При компиляции с препроцессором CSS любой комментарий с двойной косой чертой удаляется (например, // комментарий ) и сохраняется любой комментарий косой черты (например, /* comment */ ). При этом используйте двойную косую черту для комментариев, которые вы хотите на не скомпилированной стороне, и слэш-звездочкой для комментариев, которые вы хотите видеть после компиляции.
Просто примечание: если вы компилируете minified, все комментарии удаляются.
Заключение
Каждый препроцессор CSS, который мы рассмотрели (Sass, LESS и Stylus), имеет свой собственный уникальный способ выполнения той же задачи, предоставляя разработчикам возможность использовать полезные неподдерживаемые функции, сохраняя при этом совместимость браузера и чистоту кода.
Хотя это не требование для разработки, препроцессоры могут сэкономить много времени и иметь некоторые очень полезные функции.
Я призываю всех вас попробовать как можно больше препроцессоров, чтобы вы могли эффективно выбирать фаворита и знать, почему его предпочитают другие. Если вы еще не пытались использовать препроцессор для написания CSS, я настоятельно рекомендую вам попробовать.
У вас есть любимая функция препроцессора CSS, о которой я не упоминал? Есть ли что-то, что можно сделать иначе? Дайте нам знать в комментариях ниже!
Особая благодарность Karissa Smith, супер-талантливому другу, которая создала миниатюру для этой статьи.
