Compass Selector Helpers
nest($selector1, $selector2, ...)
Nest selectors as if they had been nested within a sass file. Each selector passed in can be a comma-delimited list of selectors and they will be permuted as they would be in a sass file. The generated selectors can be further nested within the sass file itself.
This function can accept any number of selector arguments.
- nest(".foo", ".bar", ".baz")
- .foo .bar .baz
- nest(".foo, .bar", ".baz")
- .foo .baz, .bar .baz
- nest(".foo, .bar", "a, span")
- .foo a, .foo span, .bar a, .bar span
append-selector($selector, $to-append)
This helper function appends any selector with some string. No space or punctuation is added when appending. The selector can be a comma-delimited list of selectors.
- append-selector(".foo", ".bar")
- .foo.bar
- append-selector("p, div, span", ".bar")
- p.bar, div.bar, span.bar
enumerate($prefix, $from, $through, $separator)
Enumerate the given $prefix
from $from
through $through
.
Note: Using the @extend
directive is usually preferred to this helper, which was created before @extend
existed.
headings($from, $to)
This helper function emits headings. It's best to just see it in action:
Note: This function is aliased to headers()
, both can be used interchangeably.
- headings()
- h1, h2, h3, h4, h5, h6
- headings(all)
- h1, h2, h3, h4, h5, h6
- headings(2)
- h1, h2
- headings(2,5)
- h2, h3, h4, h5