Препроцессоры css sass less stylus

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Перевод статьи Madhavan Nagarajan «An Introduction to CSS Pre-Processors: SASS, LESS and Stylus»

DenKick/an-Introduction-to-css-pre-processors

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Данный текст — перевод статьи Madhavan Nagarajan «An Introduction to CSS Pre-Processors: SASS, LESS and Stylus».

Оригинал доступен по ссылке. Прочитавших, просьба поддержать автора. Также рекомендую прочитать его другие статьи (уже на английском языке).

Введение в препроцессоры CSS: SASS, LESS and Stylus.

Препроцессоры CSS уже годы помогают нам в разработке. Когда они только появились, у них было всего несколько дополнительных возможностей. Но сейчас они занимают ключевое место в разработке и имеют массу очень полезных инструментов для работы с CSS. Препроцессоры расширяют возможности CSS благодаря переменным, операторам, интерполяции, функциям, миксинам и множеству других полезных полезных функций. Одни из наиболее известных препроцессоров: SASS, LESS и Stylus. На момент публикации статьи, актуальная версия SASS — 3.3.5, LESS — 1.7.0, Stylus — 0.43.1.

Для чего использовать препроцессоры CSS?

CSS очень примитивен и даёт мало возможностей. Создание функции, переиспользование значений свойств или наследование достигается нелёгким путём. Из-за этого поддержка и обслуживание больших проектов или сложных систем — большая проблема. С другой стороны, WEB эволюционирует. Новые спецификации создаются как для HTML, так и для CSS. Но каждый браузер понимает эти спецификации только со специальным вендорным префиксом. В некоторых случаях (например, установка градиента на задний фон) написание всех вендорных префиксов превращается в пытку. Вам необходимо написать все вендорные префиксы, чтобы их поддерживали разные браузеры, всего лишь чтобы добиться одного результата.

Для того, чтобы было удобнее писать код CSS, применялись различные практики, такие как разделение определений на маленькие файлы и импортирование их в один главный файл. Этот подход помогал с разделением кода на компоненты, но это не решало проблем повторения правил и возможности поддержки такого кода. Другой подход заключался в введении объектно-ориентированного CSS. В данном случае применяли два или более класса к одному элементу. Каждый класс добавляет один типовой стиль для элемента. Использование нескольких классов увеличило возможность их повторного использования, но снизило удобство обслуживания.

Препроцессоры с их дополнительными возможностями помогают написать переиспользуемый, легко-поддерживаемый и расширяемый код CSS. Используя препроцессор, вы можете легко повысить свою производительность и уменьшить объем кода, который вы пишете в проекте.

Как и любые другие языки программирования, препроцессоры имеют разный синтаксис, но к счастью, схожий друг на друга. Каждый из них поддерживает классическое написание CSS и их синтаксис очень похож на обычный CSS. SASS и Stylus имеют дополнительные стили. В SASS вы можете избегать круглых скобок и точек с запятой, в то время как в Stylus вы можете не использовать ещё и двоеточие. Они необязательны как в SASS, так и Stylus.

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

Переменные — одна из самых желанных функций в CSS за всё время. Каждый разработчик хочет определить основной цвет и использовать его во всём файле CSS, не писав каждый раз HEX-код в значении свойства. Точно так же, как переменные нужны для цветов, они необходимы и для задание значений “width”, “font-size”, “font-family”, “borders” и тому подобного.

Переменные в SASS объявляются знаком $, в LESS — знаком @, а в Stylus префикс не нужен. В SASS и LESS значения следуют после двоеточия (:), а в Stylus — после знака равно (=).

Источник

Как работать с препроцессорами CSS (Sass, Less, Stylus)

Откройте для себя мощные возможности CSS-препроцессоров (Sass, Less, Stylus) и улучшите ваш рабочий процесс с этой познавательной статьей.

Препроцессоры CSS, такие как Sass, Less и Stylus, позволяют разработчикам упрощать и ускорять написание стилей для веб-проектов. В этой статье мы разберем основы работы с каждым из этих инструментов.

Sass

Sass (Syntactically Awesome Style Sheets) — это мощный и популярный CSS-препроцессор, предлагающий множество полезных функций, таких как переменные, вложенность, миксины и функции.

Установка и компиляция

Для работы с Sass требуется установить Node.js и выполнить следующую команду в командной строке:

Чтобы скомпилировать файлы Sass в CSS, используйте следующую команду:

Примеры использования Sass

body background-color: $primary-color;
>

Вложенность:

Less

Less (Leaner Style Sheets) — это еще один популярный CSS-препроцессор, предоставляющий возможности, похожие на Sass, такие как переменные, вложенность и миксины.

Установка и компиляция

Установите Less с помощью npm:

Затем скомпилируйте файлы Less в CSS:

lessc input.less output.css 

Примеры использования Less

body background-color: @primary-color;
>

Вложенность:

Stylus

Stylus — это еще один CSS-препроцессор, который предлагает синтаксис, отличающийся от Sass и Less. Он также предоставляет множество полезных функций, таких как переменные, вложенность и миксины.

Установка и компиляция

Установите Stylus с помощью npm:

Скомпилируйте файлы Stylus в CSS:

stylus input.styl -o output.css 

Примеры использования Stylus

body
background-color: primary-color

Вложенность:

nav
ul
margin: 0
padding: 0
li
display: inline-block

В заключение, препроцессоры CSS, такие как Sass, Less и Stylus, предоставляют мощные возможности для упрощения и улучшения написания стилей. Начните экспериментировать с ними, и вы скоро обнаружите, что они значительно улучшают ваш рабочий процесс 😉.

Источник