Stylus

Stylus

Stylus 433,552 , published on npm 2,036 in 2011 by TJ Holowaychuk (the author of Express), makes braces, colons and semicolons optional; variables need no sigil and a mixin call looks like a property. It also accepts ordinary CSS syntax.

card.styl: a variable, a mixin and nestingCSS

brand = #1565c0
rounded(r = 4px)
  border-radius r
.card
  padding 1rem 2rem
  rounded(8px)
  &:hover
    border-color lighten(brand, 20%)

Compiled CSS: npx stylus -p card.stylCSS

.card {
  padding: 1rem 2rem;
  border-radius: 8px;
}
.card:hover {
  border-color: #2982e8;
}

Indentation carries meaning, so a stray space changes the output. Stylus is maintained but slow-moving (0.64.0, October 2024 is the latest release). Vite 25,978 still compiles .styl files, so you will meet it in older Vue 5,482 projects; start new ones with Sass 22,539 or native CSS.

MENU