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