<div class="colors">
		<div class="rect color"></div>
     <i class="fa fa-arrow-right" aria-hidden="true"></i>
     <div class="rect greyscale">greyscale</div>
</div>
<script src="https://use.fontawesome.com/749e954855.js"></script>
@color: hsl(100, 98%, 36%);
@greyscale: greyscale(@color, 100%); 

.colors {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  margin: 20px;

  i {
    color: #8c8c8c;
  }
  .rect {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    border-radius: 20px;
    margin: 10px;
    
    &.color {
      background: @color;
    }
       
    &.greyscale {
      background: @greyscale;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.