Introduction to Stylus

Stylus is a preprocessor scripting language that compiles down to CSS. Known for its flexibility and minimalist syntax, Stylus offers a unique approach to writing stylesheets. In this guide, we'll delve into the philosophy and syntax of Stylus, highlighting its key features with useful examples.

Philosophy and Syntax:

- Philosophy:

Stylus aims to be minimalistic, expressive, and flexible. It embraces the "Everything is an Expression" philosophy, enabling concise and readable code with a reduced need for braces and semicolons.

- Syntax:

Stylus uses a significant amount of white space to determine its syntax, eliminating the need for brackets or semicolons. It supports both indentation-based syntax and the more conventional CSS syntax.

Example:

// Indentation-based syntax
body
  font-size 16px
  color #333
 
// CSS-like syntax
body {
  font-size: 16px;
  color: #333;
}

Key Features:

- Variable Declaration:

Stylus supports variable declarations, allowing you to store and reuse values.

Example:

primary-color = #3498db
 
.button
  background-color primary-color

- Mixins and Functions:

Stylus allows you to create mixins and functions for reusable styles.

Example:

border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n
 
.button
  border-radius 5px

- Nested Selectors:

Stylus supports nested selectors, promoting a more structured and readable code organization.

Example:

nav
  ul
    margin 0
    padding 0
    list-style none
 
    li
      display inline-block

- Property Lookup:

Stylus allows you to perform property lookup, reducing redundancy.

Example:

base-font-size = 16px
 
.small-text
  font-size base-font-size - 2px
 
.large-text
  font-size base-font-size + 4px

- Color Manipulation:

Stylus provides built-in color manipulation functions.

Example:

base-color = #3498db
 
darken-color
  color darken(base-color, 10%)
 
lighten-color
  color lighten(base-color, 20%)

Conclusion:

Stylus sets itself apart with a minimalist syntax and a philosophy centered around flexibility and expressiveness. Its features, including variable declarations, mixins, nested selectors, property lookup, and color manipulation, contribute to a concise and powerful language for writing stylesheets. While Stylus may not be as widely adopted as some other preprocessor languages, its unique approach appeals to developers seeking a lightweight and customizable solution for CSS preprocessing.