Stylus что это за программа

За что ты послал нам препроцессоры? Чем мы тебя прогневали?

В наших проектах в Коде мы используем простой CSS-код. Он компактный и понятный. Но у нас маленькие проекты.

В больших проектах CSS-код разрастается настолько, что его поддержка и сопровождение становится отдельной сложной задачей. Чтобы её упростить, используют препроцессоры.

Что такое препроцессоры

Препроцессор — инструмент, который берёт текст из одного документа, преобразует его по нужным правилам, и на выходе получается другой текст. В случае с CSS препроцессоры составляют финальный CSS-документ на основе более простого кода.

Представьте, что у вас в проекте 30 разных стилей CSS-кнопок. Они нужны для разных дел: одни опасные, другие безопасные, одни активные, другие выключены и т. д. И есть ещё формы ввода и другие интерфейсные элементы, внешний вид которых прописан в CSS.

И вот у всех этих элементов сейчас стоит параметр border-radius: 7px, то есть скругление по углам — семь пикселей. И вдруг приходит дизайнер и говорит: «Всё пропало, ставь скругление 8 пикселей!» Вы терпеливо заходите в CSS-файл и в 30 местах меняете 7px на 8px.

Основы работы с препроцессором Stylus [GeekBrains]

Приходит дизайнер и говорит: «Миша, всё ерунда, давай по новой. Теперь 6 пикселей». Можно запустить в дизайнера стулом, а можно использовать препроцессор.

С препроцессором у вас 30 кнопок, в которых будет вот так:

border-radius: $defaultBorderRadius

А где-то в отдельном месте документа будет один раз написано:

$defaultBorderRadius: 7px;

И когда дизайнер придёт менять скругление на кнопках, вы измените его один раз, в одном месте, не нанося телесные повреждения дизайнеру.

Какие бывают препроцессоры CSS

Sass. Появился в 2006 году как способ упростить работу с CSS и сразу стал популярен у разработчиков. Некоторые считают, что у Sass невысокая скорость работы, но на практике это можно заметить только на очень больших проектах.

Любопытно, что у Sass есть два синтаксиса:

• Sass — самый первый вариант, где не используются фигурные скобки, а всё сделано на отступах, как в Python.
• SCSS — в нём есть фигурные скобки, как в родном CSS, а ещё есть поддержка современных CSS-трюков, которые используются в разных браузерах. Этот формат появился после выхода LESS и стал ответом конкуренту.

LESS. В 2009 году другие программисты показали свою версию препроцессора, основанную на Sass. Они взяли за основу чистый CSS-синтаксис и добавили в него возможность использовать все расширения как в Sass. Технически это интереснее, чем простой Sass, но нельзя сказать, что это сильно круче, чем тот же SCSS.

Stylus и другие. Есть и другие препроцессоры — например, тот же Stylus. Принципиально он делает то же самое, но использует другой синтаксис, более лаконичный и простой.

Какой выбрать?

По сути все они делают одно и то же: упрощают работу с CSS-кодом, поэтому это вопрос вкуса и привычек. Если давать общие рекомендации, мы бы сделали так:

S Pen — уникальный стилус или бесполезная «палочка» в смартфоне? | Краткая история и фишки S Pen

• Sass (SCSS) подойдёт тем, кто больше любит программирование, чем вёрстку.
• LESS понравится всем, кому приглянулся чистый CSS-синтаксис, но хочется сделать работу ещё проще.
• Stylus можно выбрать тем, кто ценит в коде лаконичность и минимализм.

Когда использовать препроцессоры

Если у вас CSS-код занимает не больше одной-двух страниц, нет смысла использовать препроцессоры: настройка и описание кода займёт больше времени, чем сразу написать то, что нужно. А вот если у вас большой сайт с разным дизайном на странице или очень сложная CSS-вёрстка, то тут уже пригодятся препроцессоры.

Мы покажем работу препроцессоров на примере SCSS-синтаксиса. Для других препроцессоров примеры будут выглядеть почти так же, отличия только в ключевых словах и некоторых символах.

Переменные. Если вы используете один и тот же фирменный цвет для ссылок, рамок вокруг картинок, то можно задать этот цвет в одном месте, а потом обращаться к нему откуда угодно. Зададим переменными ширину и цвет элемента:

$width: 10px;
$headercolor:red;
#main h1 width: $width;
color:$headercolor;
>

Простая работа с вложенными структурами. Когда мы делали красивые ссылки, то у нас была вложенная структура для элемента а: подчёркивание при наведении, цвет после посещения ссылки, цвет до посещения и так далее. Вот как это можно организовать попроще:

Миксины. Это то же самое, что обычные функции в программировании. Их можно вызывать сколько угодно раз с любыми параметрами. Новый параметр — новый результат работы миксина. Ими удобно оформлять повторяющиеся куски кода в разных местах.

Представьте, что у вас есть шрифт, для которого вы подобрали нужный интерлиньяж, размер и толщину. Но для меню нужен красный текст, в подсказках — белый на чёрном фоне, а основной текст используется как есть. Тогда мы можем написать так:

.page-text font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #000000;
>
.menu-text font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000;
>
.tip-text font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ffffff;
background-color: #000000;
>

Чем больше однотипного кода используется в CSS-файле, тем проще из этого сделать один миксин.

Математика, функции, условные операторы и циклы. Сильная сторона препроцессоров — использование внутренних вычислений для получения готового кода. Например, если вам нужно описать несколько видов шрифта, которые увеличиваются на 4 пункта каждый, это можно сделать в цикле. Если нужно получить точную ширину колонки при разном размере экрана — берите условный оператор.

Преимущества и недостатки препроцессоров

Так как все CSS-препроцессоры делают примерно одно и то же, только немного разными способами, то сильные и слабые стороны у них будут одни и те же:

✅ Хорошо подходят для больших проектов.

✅ Сильно расширяют возможности обычного CSS.

✅ Упрощают работу с однотипным кодом.

✅ Проще вносить изменения и поддерживать код в актуальном состоянии.

✅ Сразу видна логическая структура CSS, легко разобраться в том, из чего состоит каждый элемент.

❌ Нет смысла использовать в маленьких проектах и простых страницах.

❌ На выходе препроцессора получается CSS-код, который сложно прочитать человеку.

❌ Нужно изучать что-то кроме самого CSS.

❌ У каждого препроцессора свой синтаксис, и не получится быстро перейти от одного к другому.

С чего начать

Sass → почитайте sass-scss.ru, там есть всё, что нужно знать для работы с этим препроцессором. Документация настолько подробная, что её можно освоить вообще без опыта работы с таким инструментом.

LESS → Путеводитель для новичков по CSS-препроцессору Less. Просто, доходчиво и с кучей примеров для каждой команды.

Stylus → если знаете английский, почитайте официальный сайт проекта. Если не знаете — почитайте краткое руководство по использованию и опыт разработчиков Яндекс.Почты.

Получите ИТ-профессию

В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.

Источник: thecode.media

Знакомимся со Stylus

Если вы часть Front-End сцены, вы, возможно, слышали о Stylus, дальнем родственнике препроцессорного языка Sass, которого никто толком не знает. Как и Sass, Slylus является CSS препроцессором, написанном в Node.js. Согласно данным веб-сервиса GitHub, он определяет себя как:

[…] революционно новый язык, обеспечивающий эффективный, динамический и экспрессивный способ создания CSS.

Ну, допустим, что использование слова «революционный» здесь немного преувеличено. Но все остальное, правда. «Что? Еще один?»- спросите Вы. «Своего рода», – отвечу я. Но, Stylus совершенно не новый язык. Он начал свое существование примерно с начала 2011 года, но, как я успел заметить, мнение о нем довольно разнится.

Кстати, знаете ли вы, что последние изменения в Mozilla Developer Network были сделаны при помощи Stylus? Дэвид Уолш, занимавшийся проектом, также написал о том, как начать работу со Stylus.

Итак, каковы преимущества Stylus перед Sass? Во-первых, он разработан на базе Node.sj, что для меня лично является плюсом. И как бы это и здорово, что можно использовать Sass в рабочем процессе Node, благодаря Sass wrapper для LibSass, однако, нельзя сказать того же самого о LibSass, написанном в Node.

К тому же, Slylus имеет чрезвычайно податливый синтаксис, который может быть хорошим или плохим в зависимости от проекта, команды и тенденции придерживаться строгих принципов кодирования. Я думаю, что податливый синтаксис это неплохо, конечно, если вы не начнете «привлекать» слишком много логики к таблице стилей, и поставили код, прежде чем совершить это.

В общем, Stylus и Sass поддерживают довольно много одних и тех же функций; вы можете взглянуть на полный список функций Stylus, но не ждите ничего новаторского (хотя там есть несколько усовершенствованных функций). Slylus также поддерживает множество синтаксических функций, хотя контуры являются гораздо более размытыми, чем в Sass: вы можете писать в разных стилях как хотите (с отступом, в CSS-стиле), и вы можете смешивать и сочетать в одном стиле (анализатор для этого, должно быть, было весело писать).

Итак, что вы думаете? Хотите попробовать?

Начинаем

Как отмечалось ранее, Slylus написан в Node.js, чтобы мы могли установить его, как любой другой пакет npm:

Оттуда, вы можете подключить его в рабочий процесс Node с использованием JavaScript API, или вы можете использовать командную строку command line executable, чтобы составить таблицы стилей. Ради простоты, мы будем использовать инструмент командной строки Stylus, но, не стесняйтесь взять его у Node script, Gulp или Grunt

stylus ./stylesheets/ —out ./public/css

Предыдущая команда сообщает Stylus, чтобы собрать все Stylus стили ( .styl) из папки stylesheetsи собрать их в папке public/css. Конечно, вы также можете посмотреть каталог, если хотите внести изменения:

stylus —watch ./stylesheets/ —out ./public/css

Написание стилей в Stylus

Если вы только начали, и не хотите перегружать себя новым синтаксисом, знайте, что вы можете написать простой CSS в файле .styl . Так как Stylus поддерживает стандартный синтаксис CSS, то можно начать с CSS кода, только чтобы усилить его немного.

Основной синтаксис

Что касается самого синтаксиса, то там почти все по желанию. Фигурные скобки: зачем беспокоиться? Двоеточия: давай! Запятые: да, кому они нужны! Скобки: пожалуйста. Ниже идеально правильный код Stylus:

.foo .bar color tomato background deepskyblue

Что-то вроде нарушения на первый взгляд, но мы можем привыкнуть к нему, особенно, когда доступны синтаксические маркеры. Как вы, вероятно, догадались, предыдущий код компилируется в:

.foo, .bar

Переменные

Наиболее часто используемая функция от CSS препроцессоров должна иметь возможность определять переменные. Это не удивительно, что Slylus предлагает и это тоже. Хотя в отличие от Sass, они выражаются знаком равенства ( =), а не двоеточием ( :). Кроме того, знак доллара ( $) не является обязательным и может быть спокойно опущен.

//Определяем переменную `text-font-stack` text-font-stack = ‘Helvetica’, ‘Arial’, sans-serif; // Используем ее, как часть свойства `font` body font 125% / 1.5 text-font-stack

Теперь есть кое-что, что Stylus делает, а Sass или любой другой препроцессор не делают: поиск величины свойства. Допустим, вы хотите применить отрицательное левое поле в половину ширины; в Sass вам придется сохранить ширину в переменной, но не в Stylus:

свойства текущего блока, рассматривая его в качестве переменной. Довольно просто! Еще один интересный вариант использования, это выводить свойство в зависимости от того, было ли оно определено ранее:

В этом случае, z-index будет иметь значение 1, если только ранее .foo уже не имело установленное значение для свойства z-index. В паре с mixins(примеси) это будет сильный ход.

Mixins (примеси)

Говоря об этом, давайте определим что такое «примесь» , так как это, вероятно, один из самых популярных функций Sass! Примесь в Stylus не нуждается в определенном ключевом слове; это примесь, если она имеет скобки (пустые или нет) в конце своего имени.

size(width, height = width) width width height height
.foo size(100px)

Вы даже можете опустить скобки, если вы хотите, в этом случае, это будет похоже на то, что вы полностью используете стандартное (еще не) CSS свойство. Этот механизм называют прозрачные примеси, так как их включения невидимы.

.foo size 100px

Это может выглядеть ненужным трюком, на первый взгляд, но на самом деле эта функция позволяет авторам расширить стандартный синтаксис CSS. Рассмотрим следующую overflow примесь:

overflow(value) if value == ellipsis white-space nowrap overflow hidden text-overflow ellipsis else overflow: value

Если данное значение – это ellipsis, он печатает хорошо известный декларационный триплет, необходимый, чтобы иметь одну строку, переполненную многоточием. Иначе, она печатает заданное значение. Вот как вы будете использовать его:

.foo overflow ellipsis

Вы должны признать, что это довольно крутой трюк. Хотя он может быть запутанным (и, возможно, опасным); быть в состоянии расширить стандартные свойства CSS с дополнительными значениями на самом деле интересная концепция.

has-js() html.js https://lpgenerator.ru/blog/2016/03/08/znakomimsya-so-stylus/» target=»_blank»]lpgenerator.ru[/mask_link]

CSS препроцессор Stylus

В этой статье вы прочитаете, о том, что такое CSS препроцессор Stylus и как его установить.

Также, если вам интересен больше SASS, то прочитайте статью: «Установка sass через path», там вы узнаете как это делать, и на Windows и на Linux.

Что такое Stylus:

Как говорилось выше и судя по названию статьи, это препроцессор CSS, который призван упростить работу со стилями.

Ещё нужно сказать, что синтаксис был позаимствован с препроцессора SASS, поэтому, если вы знаете его чистый синтаксис, то вам не составит труда его изучить.

Базовый синтаксис:

Здесь не будет разбираться прям подробности синтаксиса, а только самые важные элементы.

Сначала посмотрим как вообще добавлять стили для элементов, но тут стоит сказать, что не много отличается от стандартного CSS.

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

padding : 0 ;

Также вложенность работает по принципу, вам надо без всяких знаков, внутри

Переменные:

Для того, что создать переменную, вам надо только написать её название и потом после знака равно присвоить ей нужное значение.

margin — size = 0
padding — size = 0
margin margin — size
padding padding — size

То есть опять не каких знаков, кроме знака равно нет, это всё выйдет тот же CSS как в прошлом примере.

padding : 0 ;

Функции:

Одна из самых полезных особенностей Stylus и вообще препроцессоров это возможность создавать функции или как их тут называют, миксины.

border-radius ( n )
-webkit-border-radius n
-moz-border-radius n
border-radius n
border-radius ( 10px )

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

— webkit — border — radius : 10px ;
— moz — border — radius : 10px ;
border — radius : 10px ;

Это пожалуй самое главное что стоит знать, но также существуют циклы и другие возможности, тут были только основные.

Как установить Stylus:

Устанавливается Stylus только через NPM, поэтом сначала нужно скачать и установить Node.js, про это посмотрите в этих статьях.

• Как установить Node.js на любую версию Windows;
• Как установить Node.JS на Linux или на Ubuntu 19.04;

Теперь перейдём к самой команде.

npm install stylus — g

Вывод:

В этой статье вы прочитали про CSS препроцессор Stylus, было рассказано, что это такое, базовый синтаксис и как его установить.

Также, если вы хотите узнать подробнее про его возможности, то посмотрите его официальную документацию.

Источник: prognote.ru

CSS-препроцессор Stylus: плюсы, минусы, подводные камни / Frontend

Порог вхождения минимален. Не верь мифам, что для использования css-препроцессоров необходимо долго привыкать к новому синтаксису — все максимально просто и интуитивно понятно. Имеется простое и удобно javascript api, а также одноименное консольное приложение с режимом watch. Выполнил в консоли

stylus -w file.styl

• скудное коммьюнити
• все непросто с автоматической генерацией спрайтов(об этом поговорим подробнее в следующий раз)
• наследование только классов, которые были описаны выше
• продукт очень молодой и потому имеет немало багов, но стоит отметить, что фиксятся они крайне быстро

Источник: phptime.ru