Sass scss less что выбрать
Краткий обзор отличий 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 и этого более чем достаточно.
Почему мы решили отказаться от LESS в пользу SCSS: сравнение препроцессоров CSS
Дата публикации: 2018-05-22
От автора: прежде всего, что такое препроцессор? Вкратце препроцессор – это программа, модифицирующая данные под входные требования другой программы. Препроцессоры CSS – это скриптовый язык, расширяющий возможности обычного CSS переменными, правилами вложенности, функциями и логическими блоками.
Зачем мне его использовать?
Часто вы будете попадать в ситуацию, когда придется использовать одинаковое значение для определенного свойства в разных местах. Например, сначала вы указали красный первичным цветом сайта. Потом вам необходимо сменить его на зеленый.
С переменными вам не нужно искать и заменять все упоминания красного в стилях. Вы один раз определяете значение переменной, например, «primary color», а затем используете эту переменную как значение.
Значение primary color меняется в одном месте. Можно также импортировать CSS файлы из других источников, не думая о количестве сетевых запросов, так как перед компиляцией их все можно объединить в один файл.
Благодаря вложенной природе CSS препроцессоров, вы получите компактный код с таким же результатом. В основе LESS и SCSS лежит принцип DRY, который расшифровывается как «Don’t repeat yourself» или «не повторяйтесь».
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Что не так с LESS?
В сети уже полно обсуждений о том, что лучше: LESS или SCSS. Поэтому я не буду подробно раскрывать обе темы. Вместо этого я расскажу про маленькие проблемы, которые у меня возникли с LESS.
Хотя этот сценарий реален не для всех, лучше использовать разные идентификаторы для разделения элементов.
SCSS поддерживает традиционные логические выражения типа if/else, блоки и циклы. Guarded миксины в LESS легче для глаза, но их сложнее понять.
Можно сделать с помощью LESS…
… или просто с помощью SCSS.
LESS определяет лишь один guarded миксин. Поэтому нельзя просто передать второй аргумент и обработать его в том же миксине, продублировав код для всех возможных сценариев. На самом деле, LESS (меньше) значит больше (игра слов).
Я знаю, что можно сократить код, используя аугментированные значения в качестве имен свойств для этого случая, но проблема в том, что я не могу условно сопоставлять две разные части одного и того же миксина с LESS.
С таким кодом головной боли больше…
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Чтобы достичь такого же результата с помощью LESS, мне пришлось предопределять все, писать миксин, получать позицию индекса, итерировать его с моей логикой до тех пор, пока значение индекса не станет равным нулю, и вызывать миксин вручную.
Хотя это лично мое мнение, мне кажется, что SCSS в целом лучше обрабатывает значения вычислений и математические значения.
Что с этим не так?
LESS, с другой стороны, гораздо сложнее. Например, когда я использую его, я не пытаюсь проводить вычисления. Но даже если бы я это делал, с каких пор 100% минус 50px равно 50%?
LESS, почему ты игнорируешь значения с единицами изменений?
Зачем ты заставляешь меня учить твои костыли, когда я уже знаю CSS?
И последнее. Благодаря проекту LibSass, у SCSS есть много оберток для других языков, например, C, Go, PHP, Python, Dart и т.д.
Почему мы решили отказаться от LESS в угоду SCSS?
Пока мы разрабатывали JotForm Cards, нам нужно было предварительно обрабатывать значения переменных – предварительная компиляция и кеширование на стороне сервера одновременно; и все это нужно было сделать идеально.
Мы хотели, чтобы пользователи могли настраивать внешний вид форм. Чтобы любые изменения мгновенно и одновременно отображались и кэшировались на сервере. Ради наших пользователей мы не хотели запускать клиентскую LESS-оболочку, потому что это потребует вычислительной мощности клиента — и много чего может пойти не так.
Мы не начали цикл разработки с целью перехода от LESS к SCSS. Но на полпути, занимаясь этими незначительными проблемами, отсутствие достойной обертки для LESS стало последней каплей.
При этом различия между LESS и SCSS менее важны, чем то, что их объединяет. В конце концов, не имеет значения, какой препроцессор вы используете, если вы его используете.
Пытаться управлять огромным проектом с одним CSS-файлом и традиционной структурой CSS намного сложнее, чем использовать препроцессор с парой проблем.
Автор: Kaan Kavuştuk
Редакция: Команда webformyself.
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Знакомство с LESS и сравнение с Sass
Я достаточно пользовался LESS, пока у меня не возникла одна интересная ситуация пару месяцев назад. CSS никогда не было для меня проблемой (хотя там в принципе ничего сложного то и нет), но я был вдохновлен идеей об использовании переменных для создания нечто вроде линий палитры цветов для шаблонов и веб-сайтов. Палитра с фиксированным числом опций помогает предотвратить смешивание цветов и выделение их из выбранного стиля.
Как же понять, для чего использовать LESS, а для чего Sass? В принципе, они достаточно похожи между собой. Давайте рассмотрим их общие характеристики:
* Mixins – классы для классов.
* Parametric mixins – классы, к которым вы можете применить параметры типа функций.
* Nested Rules – классы внутри классов, которые срезают повторяющийся код.
* Operations – математика в пределах CSS.
* Color functions – редактирование цветов.
* Namespaces – группы стилей, которые могут быть вызваны ссылками.
* Scope – произведение локальных изменений в стилях.
* javascript evaluation – javascript-выражения, определенные в CSS.
Основное различие между LESS и Sass заключается в том, каким образом они производятся. LESS – в библиотеке javascript и, соответственно, выполняет работу на стороне клиента.
Sass, в свою очередь, запускает Ruby и работает на серверной стороне. Многие разработчики не пользуются LESS из-за того, на обработку кода движком javascript требуется больше времени, и в результате мы получаем измененный CSS-код для браузера. Существует несколько путей оперирования. Я пользуюсь тем, когда LESS используется только при процессе разработки. Как только я заканчиваю, я копирую и вставляю результат, полученный в LESS в уменьшитель кода, а затем в отдельный CSS-файл, который должен быть включен вместо файлов LESS. Другой способ заключается в применении LESS.app для компиляции и минимизации ваших файлов LESS. Оба способа минимизируют наполнение ваших стилей, а также помогут избежать проблем, которые могут возникнуть, в случае если браузер клиента не поддерживает javascript. Это бывает редко, но данную возможность исключать нельзя.
Просим вас также учитывать отзыв от Адама Стковиака (Adam Stacoviak), который был написан после бурных обсуждений статьи от Smashing Magazine в Twitter: «На самом деле, Sass требует Ruby, хотя он и не должен быть скомпилирован в CSS-документ на сервере. Он может быть скомпилирован локально (как было указано в LESS), и этот скомпилированный файл может быть перемещен вместе с вашим проектом, шаблоном для WordPress, для Expression Engine и так далее. Так как это Smashing Magazine, и контингент пользователей может значительно разниться, я предполагаю, что многие из вас используют Mac. Итак, Ruby по умолчанию есть на всех машинах Mac, так что простая установка Sass позволит вам сразу же приступить к работе.
Как только вы установили Sass, вы можете локально конвертировать его в CSS и переправить код с проектом, как я уже рассказывал. Если вы не уверены в том, как начать работу с Sass (или Compass), то мы написали достаточно детальное руководство под названием «Getting Started with Sass and Compass» (приступаем к работе с Sass или Compass)». Давайте все дружно поблагодарим Адама!
Установка
LESS достаточно просто внедрить в любой проект, над которым вы работаете:
1. Скачайте копию less.js ;
2. Создайте файл, который вы наполните своими стилями (например, style.less);
3. Добавьте следующий код в «head» вашего HTML-документа:
Учитывайте атрибут «rel» у ссылки. Вы обязательно должны закрепить «/less» в конец значения. Это нужно для того, чтобы LESS заработал. Вам также следует включить скрипт сразу же после ссылки на документ таблиц стилей. Если вы работаете на HTML5 (а я не вижу причин, почему бы не работать на нем), то вы можете оставить «type=»text/css»» и «type=»text/javascript»».
Существует также серверная версия LESS. Наипростейший способ установки LESS на сервере производится с помощью Node Package Manager (NPM).
Переменные
Если вы разработчик, то наверняка переменные – ваши лучшие друзья. Если вам требуется несколько раз использовать одну и ту же информацию (например, цвет), настройка переменной имеет огромное значение. Таким образом, вы гарантируете самому себе сплоченность документа и освобождаете себя от постоянного скроллинга документа в поисках нужного hex-значения, чтобы скопировать его и использовать в новом элементе. Вы даже можете позабавиться, добавив или исключив hex-значения, которые вам нужно генерировать. Возьмем данный пример:
Если мы применим данные стили к трём div’ам, то у нас получится эффект градации, созданный при помощи добавления и исключения значения к и от естественного синего:
Переход от @light_blue к @blue к @dark_blue.
Единственная разница между переменными в LESS и Sass заключается в том, что LESS использует «@», а Sass – «$». Существует также и другие отличия, но их не так сложно изучить.
Mixins
По возможности, мы можем создать стиль, предназначенный для использования повторно в одном и том же документе таблиц стилей. Никто не запрещает вам использовать несколько классов, применять их к элементам в HTML, но вы также можете сделать это, не закрывая документ CSS. Нужно лишь использовать LESS. Для того чтобы продемонстрировать это, я ставил некоторый отрывок кода, посредством которого можно стилизовать два элемента на странице.
У вас получится нечто похожее на то, что вы надеялись получить, вернувшись в HTML-документ и добавив класс «.bordered» к обоим элементам. Но важно учесть то, что вы реализовали это, не закрывая документ CSS. Это работает следующим образом:
Как article, так и неупорядоченный список разделяют между собой стиль границы.
С помощью Sass вы объявляете «@mixin» приоритетным для стиля для того, чтобы определить его как mixin. Далее вы объявляете «@include» для того, чтобы вызвать его.
Параметрические Mixins
По типу того, как вы используете функции в CSS, данная функция может быть особо полезной для тех, кто охотно использует и без того, казалось бы, безграничные возможности современных CSS. Самый лучший и полезный пример её использования относится ко множеству префиксов производителей браузеров, с которыми сталкиваемся по время перехода от CSS2 к CSS3. Nettuts+ опубликовали отличный вебкаст и статью от Джеффри Уэя (Jeffrey Way), которая включает в себя детальную информацию о внедрении файла, полностью состоящего из полезных параметрических mixin’ов. Статья охватывает ваши любимые параметры CSS3 с префиксами производителей. Например, простой mixin для управления закругленными углами в различных формах:
В данном случае, класс «.border-radius» имеет радиус в 3 пикселя по умолчанию, но вы можете ввести любое угодное значение, и получить закругленные углы. Например, «.border-radius(10px)» закруглит углы на 10 пикселей.
Синтаксис в Sass очень похож на LESS. Просто для переменных используйте «$», и вызывайте mixin’ы посредством методов «@mixin» и «@include», о которых я упоминал ранее.
Selector Inheritance (наследственность селектора)
Давайте рассмотрим кое-что, чего нет в LESS. С помощью данной возможности, вы можете применить селектор к уже ранее установленному селектору без нужны прибегать к формату с разделением через запятую.
Nested Rules (Разветвленные правила)
Приведенный выше код абсолютно идентичен некрасивому селектору, о котором мы упомянули в предыдущем абзаце, но его гораздо легче прочесть и понять, и занимает он гораздо меньше места. Вы также можете в стилизации элементов сослаться на их псевдо-элементы используя «&» – в данном случае эта функция схожа с «this» в javascript.
Операции
Здесь будет примерно то, чего вы и ожидаете: использование точных чисел или переменных для произведения математических операций в стилях.
К слову, я знаю, что я также могу разделять элементы на 4 и получать переменные типа «@quarter_page», но мне хотелось бы продемонстрировать то, что здесь также уместно правило с круглыми скобками. Скобки также будут обязательными, если вам захочется провести операцию внутри параметра. Например, «border: (@width / 2) solid #000».
Sass гораздо более универсален в случае с цифрами, нежели LESS. Он был встроен в конверсионные таблицы для комбинирования сравниваемых единиц. Sass может работать с неопределенными единицами измерений, а также выявлять их. Данное свойство было представлено в попытке укоренить значимость библиотеки против изменений, которые были внесены в W3C.
Функции цветов
Ранее я уже упоминал о том, как LESS помогает мне орудовать с цветовой схемой в процессе написания кода. С этим также нераздельно связана и функция цветов. Предположу, что вы используете стандартный синий цвет по всему документу стилей, и вам хочется применить данный цвет к отправной кнопке «Submit» в форме. Вы можете открыть Photoshop или любой другой редактор, чтобы получить оттуда hex-значение (для цвета, который немного светлее или темнее). Либо вы можете просто использовать функцию цветов, предусмотренную в LESS.
Функция «lighten» в прямом смысле осветляет цвет по процентной шкале. В данном случае, функция осветлит основной синий на 10%. Данный способ позволяет вам изменять цвет градированных элементов и любые другие элементы с таким же цветом, просто изменяя сам основной цвет. Это может предложить вам значительные возможности в процессе оформления. К тому же, если вы использовали параметрическую функцию (из тех, что описаны выше), вы можете облегчить себе работу над браузерными префиксами, превратить их в нечто вроде «.linear-gradient(lighten(@blue), @blue, 100%);».
С другой стороны, у вас получится достаточно красивый эффект:
Так и получилась наша красивая градированная кнопка Submit, основанная на переменной.
Существуют и другие цветовые функции для затемнения или изменения цветности цветов, а также для вращения цветового колеса к другим цветам. Я рекомендую вам попробовать их для того, чтобы выяснить – какие функции больше всего вам пригодятся.
У Sass, кажется, достаточно много цветовых опций, но вряд ли все эти функции нам реально понадобятся. В большинстве своем, мы используем лишь затемнение и осветление. Если вам интересно узнать больше, то ознакомьтесь с соответствующей статьей на Nex3.
Условности и контроль
Ещё одна достаточно полезная штуковина, предложенная в LESS. С помощью Sass, у вас есть возможность использовать условные выражения «if < >else < >», а также циклы «for < >». Он поддерживает операторы «and», «or» и «not», а также « », « =» и «==».
Namespaces
Namespaces могут быть использованы для того, чтобы добавить еще один уровень в код CSS, что позволяет нам создавать группы наиболее часто используемых стилей, а затем выбирать их них на ходу. Например, если мы создали группу стилей под названием «defaults», мы можем выбрать из этой группы то, что нам нужно, когда соберемся обработать определенный элемент.
Далее, в нашем коде, если мы встречаемся с элементом «ul» внутри элемента «nav», мы будем знать, что нам потребуется стиль default. Итак, мы без труда можем применить его.
Scope (учёт рамок)
Учитывать рамки в программировании – это норма, следовательно, это такая же норма и в LESS. Если вы определите переменную на корневом уровне каскадной таблицы стилей, она будет доступна для всего документа. Если же вы, тем не менее, переопределите переменную и прикрепите её к селектору типа id или class, то она будет доступна лишь с данным значением лишь в рамках данного селектора.
Так как мы заново объявили переменную в селекторе «#header», значение до этой переменной будет отличаться и будет применимо только внутри данного селектора. Всё, что будет до или после него, сохранит значение изначального объявления.
Scope в Sass выполнен немного иным образом. В вышеприведенном коде, когда переменная «@color» изменена на «red», она будет интерпретирована в коде как есть.
Comments (Комментарии)
Импорт
String Interpolation (Интерполяция строк)
Строчные данные также могут быть использованы в переменных и вызваны в пределах стиля посредством «@
Escaping
Случаются моменты, когда вам нужно включать значение, которое не валидно для синтаксиса CSS или которое LESS не распознает. Зачастую такая ситуация возникает при необходимости реализовать какой-нибудь хак для нормализации работы приложения в продукции Microsoft. Во избежание ошибок и краха LESS, вам нужно будет исключить их.
javascript Evaluation (Определение javascript)
Это одна из моих любимых частей в работе с LESS: очень просто использовать javascript в стилях. Вы можете использовать выражения, а также обращаться к функциям среды разработки посредством обратного апострофа (`).
Форматирование на выходе
Хотя LESS не имеется настроек при выводе, Sass предлагает 4 версии вывода: ветвистая, компактная, сжатая и расширенная.
Эти две великолепные библиотеки разделяют много общего. Обе являются превосходными инструментами для дизайнеров, кто разрабатывает код, а также они могут помочь разработчикам работать более эффективно и быстрее. Если вы являетесь фанатом Ruby или HAML, то Sass точно вам подойдет. Как по мне (а я разработчик PHP и javascript), я придерживаюсь LESS, так как его гораздо проще интегрировать, а также осуществлять доступ к javascript-выражениям и атрибутам документа. Я сомневаюсь, что когда-либо прибегал к действительно серьезным навыкам программирования, пока разрабатывал таблицы стилей, но думаю, что стоит попробовать. Если вы пользовались обеими библиотеками, то мне бы хотелось услышать ваше мнение и советы! Наш ресурс всегда рад получать комментарии!
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.
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, супер-талантливому другу, которая создала миниатюру для этой статьи.