Stylus

Stylus is an expressive, dynamic CSS preprocessor. It supports both an indented, minimal syntax (optional braces, colons and semicolons) and regular CSS-like syntax, and adds variables, nesting, mixins and functions to CSS.

Demo

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Hello, Stylus!</h1>\n  <p>This is styled with <strong>Stylus</strong>.</p>\n  <ul class=\"features\">\n    <li>Variables</li>\n    <li>Nesting</li>\n    <li>Mixins</li>\n  </ul>\n</div>\n"
    },
    "style": {
      "language": "stylus",
      "content": "primary = #3182ce\nbg = #f0f4f8\nradius = 8px\n\nflex-center()\n  display flex\n  gap 1em\n\n.container\n  font-family sans-serif\n  max-width 600px\n  margin 2em auto\n  padding 1.5em\n  border-radius radius\n  background bg\n  box-shadow 0 2px 8px rgba(0, 0, 0, 0.1)\n\n  h1\n    color #2d3748\n\n  p\n    color #4a5568\n    line-height 1.6\n\n.features\n  flex-center()\n  list-style none\n  padding 0\n\n  li\n    background primary\n    color white\n    padding 0.5em 1em\n    border-radius radius\n"
    }
  }
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Hello, Stylus!</h1>\n  <p>This is styled with <strong>Stylus</strong>.</p>\n  <ul class=\"features\">\n    <li>Variables</li>\n    <li>Nesting</li>\n    <li>Mixins</li>\n  </ul>\n</div>\n"
    },
    "style": {
      "language": "stylus",
      "content": "primary = #3182ce\nbg = #f0f4f8\nradius = 8px\n\nflex-center()\n  display flex\n  gap 1em\n\n.container\n  font-family sans-serif\n  max-width 600px\n  margin 2em auto\n  padding 1.5em\n  border-radius radius\n  background bg\n  box-shadow 0 2px 8px rgba(0, 0, 0, 0.1)\n\n  h1\n    color #2d3748\n\n  p\n    color #4a5568\n    line-height 1.6\n\n.features\n  flex-center()\n  list-style none\n  padding 0\n\n  li\n    background primary\n    color white\n    padding 0.5em 1em\n    border-radius radius\n"
    }
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Hello, Stylus!</h1>\n  <p>This is styled with <strong>Stylus</strong>.</p>\n  <ul class=\"features\">\n    <li>Variables</li>\n    <li>Nesting</li>\n    <li>Mixins</li>\n  </ul>\n</div>\n"
    },
    "style": {
      "language": "stylus",
      "content": "primary = #3182ce\nbg = #f0f4f8\nradius = 8px\n\nflex-center()\n  display flex\n  gap 1em\n\n.container\n  font-family sans-serif\n  max-width 600px\n  margin 2em auto\n  padding 1.5em\n  border-radius radius\n  background bg\n  box-shadow 0 2px 8px rgba(0, 0, 0, 0.1)\n\n  h1\n    color #2d3748\n\n  p\n    color #4a5568\n    line-height 1.6\n\n.features\n  flex-center()\n  list-style none\n  padding 0\n\n  li\n    background primary\n    color white\n    padding 0.5em 1em\n    border-radius radius\n"
    }
  }
};
  return (<LiveCodes {...options} />);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Hello, Stylus!</h1>\n  <p>This is styled with <strong>Stylus</strong>.</p>\n  <ul class=\"features\">\n    <li>Variables</li>\n    <li>Nesting</li>\n    <li>Mixins</li>\n  </ul>\n</div>\n"
    },
    "style": {
      "language": "stylus",
      "content": "primary = #3182ce\nbg = #f0f4f8\nradius = 8px\n\nflex-center()\n  display flex\n  gap 1em\n\n.container\n  font-family sans-serif\n  max-width 600px\n  margin 2em auto\n  padding 1.5em\n  border-radius radius\n  background bg\n  box-shadow 0 2px 8px rgba(0, 0, 0, 0.1)\n\n  h1\n    color #2d3748\n\n  p\n    color #4a5568\n    line-height 1.6\n\n.features\n  flex-center()\n  list-style none\n  padding 0\n\n  li\n    background primary\n    color white\n    padding 0.5em 1em\n    border-radius radius\n"
    }
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import LiveCodes from 'livecodes/svelte';

const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Hello, Stylus!</h1>\n  <p>This is styled with <strong>Stylus</strong>.</p>\n  <ul class=\"features\">\n    <li>Variables</li>\n    <li>Nesting</li>\n    <li>Mixins</li>\n  </ul>\n</div>\n"
    },
    "style": {
      "language": "stylus",
      "content": "primary = #3182ce\nbg = #f0f4f8\nradius = 8px\n\nflex-center()\n  display flex\n  gap 1em\n\n.container\n  font-family sans-serif\n  max-width 600px\n  margin 2em auto\n  padding 1.5em\n  border-radius radius\n  background bg\n  box-shadow 0 2px 8px rgba(0, 0, 0, 0.1)\n\n  h1\n    color #2d3748\n\n  p\n    color #4a5568\n    line-height 1.6\n\n.features\n  flex-center()\n  list-style none\n  padding 0\n\n  li\n    background primary\n    color white\n    padding 0.5em 1em\n    border-radius radius\n"
    }
  }
};
</script>

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Hello, Stylus!</h1>\n  <p>This is styled with <strong>Stylus</strong>.</p>\n  <ul class=\"features\">\n    <li>Variables</li>\n    <li>Nesting</li>\n    <li>Mixins</li>\n  </ul>\n</div>\n"
    },
    "style": {
      "language": "stylus",
      "content": "primary = #3182ce\nbg = #f0f4f8\nradius = 8px\n\nflex-center()\n  display flex\n  gap 1em\n\n.container\n  font-family sans-serif\n  max-width 600px\n  margin 2em auto\n  padding 1.5em\n  border-radius radius\n  background bg\n  box-shadow 0 2px 8px rgba(0, 0, 0, 0.1)\n\n  h1\n    color #2d3748\n\n  p\n    color #4a5568\n    line-height 1.6\n\n.features\n  flex-center()\n  list-style none\n  padding 0\n\n  li\n    background primary\n    color white\n    padding 0.5em 1em\n    border-radius radius\n"
    }
  }
};
  return (<LiveCodes {...options} />);
}

Preact

import LiveCodes from 'livecodes/preact';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Hello, Stylus!</h1>\n  <p>This is styled with <strong>Stylus</strong>.</p>\n  <ul class=\"features\">\n    <li>Variables</li>\n    <li>Nesting</li>\n    <li>Mixins</li>\n  </ul>\n</div>\n"
    },
    "style": {
      "language": "stylus",
      "content": "primary = #3182ce\nbg = #f0f4f8\nradius = 8px\n\nflex-center()\n  display flex\n  gap 1em\n\n.container\n  font-family sans-serif\n  max-width 600px\n  margin 2em auto\n  padding 1.5em\n  border-radius radius\n  background bg\n  box-shadow 0 2px 8px rgba(0, 0, 0, 0.1)\n\n  h1\n    color #2d3748\n\n  p\n    color #4a5568\n    line-height 1.6\n\n.features\n  flex-center()\n  list-style none\n  padding 0\n\n  li\n    background primary\n    color white\n    padding 0.5em 1em\n    border-radius radius\n"
    }
  }
};
  return (<LiveCodes {...options} />);
}

Web Components

<live-codes></live-codes>

<script type="module">
  import "livecodes/web-components";

  const playground = document.querySelector("live-codes");
  playground.config = {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Hello, Stylus!</h1>\n  <p>This is styled with <strong>Stylus</strong>.</p>\n  <ul class=\"features\">\n    <li>Variables</li>\n    <li>Nesting</li>\n    <li>Mixins</li>\n  </ul>\n</div>\n"
    },
    "style": {
      "language": "stylus",
      "content": "primary = #3182ce\nbg = #f0f4f8\nradius = 8px\n\nflex-center()\n  display flex\n  gap 1em\n\n.container\n  font-family sans-serif\n  max-width 600px\n  margin 2em auto\n  padding 1.5em\n  border-radius radius\n  background bg\n  box-shadow 0 2px 8px rgba(0, 0, 0, 0.1)\n\n  h1\n    color #2d3748\n\n  p\n    color #4a5568\n    line-height 1.6\n\n.features\n  flex-center()\n  list-style none\n  padding 0\n\n  li\n    background primary\n    color white\n    padding 0.5em 1em\n    border-radius radius\n"
    }
  };
</script>

Usage

Stylus code added to the style editor is compiled to CSS before being added to the result page.

Stylus has a very flexible syntax. Braces, colons and semicolons are optional, so you can write terse, indentation-based styles or use a more CSS-like style. Variables are defined by simple assignment (e.g. primary = #3182ce).

For more details about CSS support in LiveCodes, including CSS processors, style imports, CSS modules, and CSS frameworks, see the CSS feature documentation.

Loading External Styles

Stylus supports importing external stylesheets using the @import rule. Bare module specifiers are resolved to full CDN URLs.

@import 'normalize.css'

tip

For more information about loading and importing styles, see the Style Imports documentation.

Language Info

Name

stylus

Extensions

.styl

Editor

style

Compiler

Stylus is compiled using the official Stylus compiler (running in the browser).

Code Formatting

Code formatting is not supported for Stylus, as Prettier does not support the Stylus syntax.

Links

• Stylus Official Website
• Stylus Documentation
• Stylus on GitHub
• CSS feature documentation in LiveCodes