Hello all,

In prior tutorial I have explained you about Stylus and Creating Syntax in Stylus. Now in this Tutorial I have demonstrated examples to inherit a class in stylus.

@extend

We can use @extend for inherit the css class check the example below,

.boxtop {
    padding: 10px;
    border: 1px solid #eee;
  }

  .boxBottom {
    @extend .boxtop ;
    color: #E2E21E;
  } 

Here are some more complex example, demonstrating how @extend cascades:

  red = #E33E1E
  yellow = #E2E21E

  .message
    padding: 10px
    font: 14px Helvetica
    border: 1px solid #eee

  .warning
    @extends .message
    border-color: yellow
    background: yellow + 70%

  .error
    @extends .message
    border-color: red
    background: red + 70%

  .fatal
    @extends .error
    font-weight: bold
    color: red

In next tutorial I have explained how you can use Variables in Stylus.