css-vs-paperclip.md

CSS:

.Button {
  border: none;
  padding: 16px;
  
  &--primary {
    background: blue;
    &:hover {
      background: lightblue;
    }
  }
  &--secondary {
    background: red;
    &:hover {
      background: lightred;
    }
  }
}

Paperclip:

component Button {
  variant primary;
  variant secondary;
  variant hover (enabled: [PseudoElement.Hover]);
  
  render button {
    style {
      border: none;
      padding: 16px;
      if primary {
        background: blue;
        if hover {
          background: lightblue;
        }
      }
      if secondary {
        background: red;
        if hover {
          background: lightred;
        }
      }
    }
  }
}