Знакомство со стилусом

 .foo, .bar {
  color: tomato;
  background: deepskyblue;
}

переменные

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

 $

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

 // Defining a `text-font-stack` variable
text-font-stack = 'Helvetica', 'Arial', sans-serif;

// Using it as part of the `font` property
body
  font 125% / 1.5 text-font-stack

Используя .foo
width 400px
position absolute
left 50%
margin-left (@width / 2)@width Довольно аккуратно! Еще один интересный вариант использования для этого — условно вывести свойство в зависимости от того, было ли оно уже определено:

 width

В этом случае для .foo
// ... other styles
z-index: 1 unless @z-indexz-index.foo Соедините это с миксинами, и вы действительно что-то получите.

Примеси

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

 z-index

В том же size(width, height = width)
width width
height height@include+

 .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

И это даст:

 .foo {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

Если вы хотите передать некоторый контент в @content{block}+ Во время включения вам нужно только поставить префикс имени миксина на has-js()
html.js &
{block}

.foo
+has-js()
color red

 html.js .foo {
  color: #f00;
}

Этот код будет скомпилирован в:

 arguments

Последняя очень интересная особенность миксинов Stylus: у них всегда есть локальная переменная arguments, содержащая все аргументы (если таковые имеются), переданные в mixin при включении. Эта переменная может быть обработана и обработана как массив, например, для получения значений по определенным индексам, используя [..]

Последние мысли

Прохождение всех функций и синтаксических трюков из Stylus было бы слишком долгим, и я думаю, что у нас уже было приличное введение, достаточно, чтобы начать хотя бы!

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

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

Некоторым это может понравиться, другим — нет. Мой совет должен быть очень строг с синтаксисом, хотя. Работа с таким толерантным синтаксисом не всегда может быть таким блаженством. В любом случае, приятно видеть приличное совпадение с Sass.