CodePen

HTML

            
              <div></div>
<div></div>
<div></div>
<div></div>
<div></div>
            
          
!

CSS

            
              $color: #900;

div {
  width: 100px;
  background: $color;
  height: 100px;
  margin: 1rem;
  float: left;
}

div:nth-child(2) {
  background: rgba($color, 0.5);
}

div:nth-child(3) {
  background: transparentize($color, 0.5);
}

div:nth-child(4) {
  background: darken($color, 20%);
}
div:nth-child(5) {
  background: shade($color, 20%);
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................