Variables
:root {
--primary-color: rgb(63, 81, 181);
--second-color: rgb(233, 30, 99);
}
body {
background: var(--primary-color);
background: color(var(--primary-color) shade(30%));
}
Color Adjustments
div {
background: color(var(--primary-color) alpha(-10%));
background: color(var(--primary-color) tint(-10%));
background: color(var(--primary-color) shade(-10%));
background: color(var(--primary-color) alpha(50%));
background: color(var(--primary-color) hue(225));
background: color(var(--primary-color) saturation(100%));
background: color(var(--primary-color) lightness(50%));
background: gray(33);
background: gray(33%);
background: gray(33%, 50%);
background: #0000ff80;
background: hwb(90, 0%, 0%, 0.5);
background: hsl(90deg 90% 70%);
background: hsl(90deg 90% 70% / 30%);
background: rgb(30 60 90 / 30%);
}
Mixins
:root {
--box-centered: {
display: flex;
align-items: center;
justify-content: center;
}
}
.centered {
@apply --box-centered;
}
Nesting
.login-form {
& .login-btn {
...;
}
}
Media queries
@custom-media --viewport-medium (width <= 50rem);
@media (--viewport-medium) { ··· }
image set
.foo {
background-image: image-set(
url(img/test.png) 1x,
url(img/test-2x.png) 2x,
url(my-img-print.png) 600dpi
);
}
Pseudo class
p:matches(:first-child, .special) {
color: red;
}
p:not(:first-child, .special) {
color: red;
}
a::before {
}
[frame='hsides' i] {
border-style: solid none;
}
Reference