Stylus Features

Stylus comes with a set of powerful features that enhance the capabilities of writing stylesheets. In this guide, we'll explore key features of Stylus, including variables and property lookup, mixins and functions, and control flow with conditionals. Each feature will be accompanied by useful examples.

1. Variables and Property Lookup:

- Variables:

Stylus allows the definition of variables to store and reuse values.

Example:

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

- Property Lookup:

Perform property lookup to reduce redundancy.

Example:

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

2. Mixins and Functions:

- Mixins:

Mixins allow you to group styles and reuse them in other selectors.

Example:

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

- Functions:

Stylus supports functions for more complex operations within your stylesheets.

Example:

add-border-radius(radius1, radius2)
  border-radius radius1 + radius2
 
.button
  add-border-radius(5px, 10px)

3. Control Flow and Conditionals:

- Control Flow:

Stylus provides control flow structures for conditional and looping operations.

Example:

for num in (1..3)
  .btn-{num}
    background-color #3498db
    padding num * 5px
 
// Output:
// .btn-1 {
//   background-color: #3498db;
//   padding: 5px;
// }
// .btn-2 {
//   background-color: #3498db;
//   padding: 10px;
// }
// .btn-3 {
//   background-color: #3498db;
//   padding: 15px;
// }

- Conditionals:

Use conditionals for more dynamic styles.

Example:

is-dark-theme = true
 
body
  background-color if is-dark-theme
    #333
  else
    #fff

Conclusion:

Stylus features, including variables, property lookup, mixins, functions, control flow, and conditionals, empower developers to write more concise and maintainable stylesheets. By leveraging these features, you can create modular, reusable, and dynamic styles, enhancing your CSS development workflow. Understanding and incorporating these features into your Stylus projects will enable you to write expressive and efficient stylesheets.