How to write a comment in Stylus CSS with example

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

Stylus supports three types of comments.

Stylus Comments

Comments in stylus do not generate in output CSS.

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 contain comments.

div {
  width: 100px;
}

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;
}

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;
}