Selector Aliases
Selector aliases can be useful for grouping together common selector chains for reuse.
They're defined with the @selector
directive, and can be used anywhere you might use a pseudo class.
@selector heading :any(h1, h2, h3, h4, h5, h6);
@selector radio input[type="radio"];
@selector hocus :any(:hover, :focus);
/* Selector aliases with arguments */
@selector class-prefix :any([class^="#(0)"], [class*=" #(0)"]);
@selector col :class-prefix(-col);
.sidebar :heading {
color: honeydew;
}
:radio {
margin-right: 4px;
}
:col {
float: left;
}
p a:hocus {
text-decoration: none;
}
Renders as
.sidebar h1, .sidebar h2,
.sidebar h3, .sidebar h4,
.sidebar h5, .sidebar h6 {
color: honeydew;
}
input[type="radio"] {
margin-right: 4px;
}
[class^="col-"],
[class*=" col-"] {
border: 1px solid rgba(0,0,0,.5);
}
p a:hover,
p a:focus {
text-decoration: none;
}
Selector splatting
Selector splats are a special kind of selector alias that expand using passed arguments.
@selector-splat input input[type="#(text)"];
form :input(time, text, url, email, number) {
border: 1px solid;
}
Renders as
form input[type="time"],
form input[type="text"],
form input[type="url"],
form input[type="email"],
form input[type="number"] {
border: 1px solid;
}