Comments contain a description of a line or block of code, ignored by the compiler during CSS compilation.

Stylus supports three types of comments

  • Single line comments
  • Block comments
  • Multi-line buffer Comments

Stylus Comments

Comments in stylus do not generate in output CSS.

  • Single line or Inline comments

Single line comments apply to a single line of code with a new line or inline.

It starts with a double slash(//) and comments text.

Syntax

// single line comment text

Here is an example

// single line comment text
mobilewidth=100px
div{
    width:mobilewidth; // inline comments
}

Compiled output, It does not contains comments

div {
  width: 100px;
}
  • Multi-line comments

Comments add with span in multiple lines of text, also called block-level comments.

It is identical to CSS comments. By default, It does not include comments text in CSS. set compress option to include comments in Generated CSS.

Here is a syntax

/*
 * line1 comments
 * line2 comments
 */

It starts with /* and each line starts with * and comment text and ends with */ Here is a multiline comment in stylus code

/*
 * Set mobile responsive width for div
 * example
 */
mobilewidth=100px
div{
    width:mobilewidth; 
}

Generated CSS contains comments if compress is set.

/*
 * Set mobile responsive width for div
 * example
 */
div {
  width: 100px;
}
  • Multi-line buffered comments.

It is similar to block comments and always includes comments in CSS(Irrespective of the compress option)

Syntax

/*!
 * line1 comments
 * line2 comments
 */

It starts with /*! and ends with */.

/*!
 * Set mobile responsive width for div
 * example
 */
mobilewidth=100px
div{
    width:mobilewidth; 
}

Generated CSS contains comments

/*
 * Set mobile responsive width for div
 * example
 */
div {
  width: 100px;
}