DOCSEARCHbyAlgolia
Submit Docs

Stylus

website·Indexed 39 days ago

https://stylus-lang.com

An expressive, dynamic, and robust CSS preprocessor born for Node.js. Stylus features a flexible syntax that supports both CSS-style and indentation-based notation, offering powerful tools such as mixins, functions, variables, conditionals, iteration, and an introspection API. It includes a JavaScript API for rendering, Connect middleware for auto-compilation, and support for sourcemaps v3.

Tokens
17.9K
Snippets
174
Records
181
Agent score
71%

What's inside Stylus

  1. Integrate FireStylus with Firebug for source mapping

    FireStylus is a Firebug extension that enables Firebug to display the original Stylus filename and line numbers instead of the generated CSS locations. To use it, install Firebug and the FireStylus extension, then enable the firebug option during CSS generation.

  2. Use optional extending to prevent errors

    To extend a selector that may or may not exist depending on the context, suffix the selector with !optional. If the selector does not exist, Stylus will ignore the extension instead of throwing an error.
    $specialDesign
  color: #FFF

.btn
  @extend .design !optional, $specialDesign !optional

  3. Install Stylus via npm or pnpm

    Stylus requires Node.js. You can install the Stylus CLI globally using either npm or pnpm.
    # Using npm
npm install stylus -g

# Using pnpm
pnpm add -g stylus

  4. Compare values with equality and relational operators

    Equality operators can compare units, colors, strings, and arbitrary identifiers (atoms). Only exact values match (e.g., 0 == false is false).

    Aliases:

    • == is aliased as is
    • != is aliased as is not or isnt
    #fff == #fff    // => true
wahoo == wahoo  // => true
'hey' is not 'bye' // => true
(1 2 3) == (1 2 3) // => true

  5. Retrieve values from Stylus hashes

    Values can be accessed using two methods: dot notation for identifiers (similar to JSON) or bracket notation with strings. Bracket notation is required when the key contains special characters or is stored in a variable.
    foo = {
  bar: {
    baz: { raz: 10px }
  },
  '%': 10
}

// Dot notation
foo.bar.baz.raz // => 10px

// Bracket notation for special characters
foo['%'] // => 10

// Bracket notation for variables
qux = 'raz'
foo.bar.baz[qux] // => 10px

  6. Perform color arithmetic and manipulations

    Stylus allows direct operations on colors. You can add or subtract colors to alter RGB components, use percentages to adjust lightness (add to lighten, subtract to darken), or use degrees to adjust the hue. Values are clamped appropriately, and you can use rgba() or hsla() to tweak multiple components including alpha.
    #0e0 + #0e0 // => #0f0
#888 + 50%   // Lighten => #c3c3c3
#888 - 50%   // Darken => #444
#f00 + 50deg // Adjust hue => #ffd500
#f00 - rgba(100,0,0,0.5) // => rgba(155,0,0,0.5)

  7. Use indentation for Stylus rule sets

    Stylus uses a "pythonic" indentation-based syntax. Instead of curly braces { }, whitespace (indents and outdents) is used to define blocks. Colons between properties and values are optional.
    body
  color white

  8. Define and use basic functions in Stylus

    Stylus allows the definition of in-language functions that can return values. They are defined similarly to mixins but are used to compute and return a result that can be used in property values or conditions.
    add(a, b)
  a + b

body 
  padding add(10px, 5)

  9. Interpolate expressions within CSS selectors

    Interpolation using {} can be applied to selectors. This enables the dynamic generation of selectors through loops (e.g., using nth-child) or by interpolating a variable containing a comma-separated list of selectors.
    // Example 1: Using a loop for nth-child selectors
table
  for row in 1 2 3 4 5
    tr:nth-child({row})
      height: 10px * row

// Example 2: Using a variable for multiple selectors
mySelectors = '#foo,#bar,.baz'

{mySelectors}
  background: #000

  10. Create ranges with inclusive and exclusive operators

    Stylus provides two range operators that expand into expressions. .. is inclusive of the end value, while ... is exclusive.
    1..5   // => 1 2 3 4 5
1...5  // => 1 2 3 4
5..1   // => 5 4 3 2 1

  11. Install the Stylus TextMate bundle

    Stylus provides a TextMate bundle located in the ./editors directory of the source. You can install it by running the provided make command or by manually moving the bundle file to your TextMate bundles directory.
    make install-bundle

  12. Extend multiple selectors simultaneously

    You can extend multiple selectors at once by providing a comma-separated list to the @extend directive.
    .a
  color: red

.b
  width: 100px

.c
  @extend .a, .b
  height: 200px