Stylus Functions and Plugins

Stylus supports the creation and usage of functions, enabling more dynamic and reusable styles. Additionally, Stylus can be extended through plugins, providing additional functionality. In this guide, we'll explore how to create and use functions in Stylus and leverage Stylus plugins, with useful examples.

1. Creating and Using Functions:

- Creating Functions:

Stylus allows you to define custom functions using the function keyword.

Example:

// Custom function to calculate the area of a rectangle
area(width, height)
  width * height
 
// Using the custom function
.rectangle
  width 10px
  height 20px
  area-value area(width, height)

- Using Built-in Functions:

Stylus comes with several built-in functions for various operations.

Example:

// Using built-in functions
@color = #3498db
.lighter-color = lightness(@color, 50%)
 
.button
  background-color @color
  border 1px solid @lighter-color

2. Leveraging Stylus Plugins:

- Installing Stylus Plugins:

Extend Stylus functionality by installing plugins through npm or Yarn.

# Example: Installing the autoprefixer-stylus plugin
npm install autoprefixer-stylus --save-dev

- Using Stylus Plugins:

Once installed, use the plugin in your Stylus styles.

Example:

// Using the autoprefixer-stylus plugin
@import 'autoprefixer-stylus'
 
.button
  display flex

In this example, the autoprefixer-stylus plugin is used to automatically add vendor prefixes to CSS properties.

3. Custom Stylus Functions as Plugins:

- Creating a Custom Stylus Plugin:

You can encapsulate your custom functions in a Stylus plugin for better organization.

Example:

// custom-functions.js
module.exports = function (stylus) {
  stylus.define('calculate-area', function (width, height) {
    return width * height;
  });
};

- Using the Custom Stylus Plugin:

Integrate the custom Stylus plugin into your project.

Example:

// main.styl
@require './custom-functions'
 
.rectangle
  width 10px
  height 20px
  area-value calculate-area(width, height)

In this example, the calculate-area function is defined in a custom Stylus plugin (custom-functions.js) and then used in the main Stylus file.

Conclusion:

Stylus functions provide a powerful way to create reusable and dynamic styles, whether they are custom functions or built-in ones. Leveraging Stylus plugins further extends its capabilities, allowing for integration of additional features and functionalities into your stylesheets. Whether you use existing plugins or create your own custom functions, Stylus provides flexibility and modularity for efficient CSS development.