Selectors
The extensions cx
and styled
support selectors, on the other hand css
it doesn't, since it only generates one Rule.
The syntax is similar to SASS but the only difference is that for nesting you need to use &
in front of each selector.
let link = %cx(`
color: $(Color.Text.body);
&:hover {
color: $(Color.Text.accent);
}
`)
let link = %cx(`
color: $(Color.Text.body);
&:hover {
color: $(Color.Text.accent);
}
`)
Note: Selectors can be nested within your CSS which will be attached to the classname generated (in this case by
cx
)
The support for selectors is CSS Selectors Level 3 and the more stable part of level 4 (currently in draft).
Interpolation in selectors
It's useful to keep classnames unique, or to reference other classnames in styled-ppx, that's why we support interpolation in selectors.
// Here `outlined` is a classname generated by `cx`, but it can be any string
let outlined = %cx(`
padding: 4px;
outline: 1px solid red;
`)
let link = %cx(`
color: $(Color.Text.body);
& .$(outlined) {
padding: 0px;
}
`)
<div className={link ++ " " (isActive ? outlined : "")}>
// Here `outlined` is a classname generated by `cx`, but it can be any string
let outlined = %cx(`
padding: 4px;
outline: 1px solid red;
`)
let link = %cx(`
color: $(Color.Text.body);
& .$(outlined) {
padding: 0px;
}
`)
<div className={link ++ " " (isActive ? outlined : "")}>