99 lines
3.0 KiB
Plaintext
99 lines
3.0 KiB
Plaintext
---
|
|
title: Compass Selector Helpers
|
|
crumb: Selectors
|
|
framework: compass
|
|
meta_description: Helper functions for working with selectors.
|
|
layout: core
|
|
classnames:
|
|
- reference
|
|
- core
|
|
- helpers
|
|
documented_functions:
|
|
- "nest"
|
|
- "append-selector"
|
|
- "enumerate"
|
|
- "headings"
|
|
- "headers"
|
|
---
|
|
%h1 Compass Selector Helpers
|
|
|
|
#nest.helper
|
|
%h3
|
|
%a(href="#nest")
|
|
nest($selector1, $selector2, ...)
|
|
.details
|
|
%p
|
|
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.
|
|
%p
|
|
This function can accept any number of selector arguments.
|
|
%dl
|
|
%dg
|
|
%dt nest(".foo", ".bar", ".baz")
|
|
%dd .foo .bar .baz
|
|
%dg
|
|
%dt nest(".foo, .bar", ".baz")
|
|
%dd .foo .baz, .bar .baz
|
|
%dg
|
|
%dt nest(".foo, .bar", "a, span")
|
|
%dd .foo a, .foo span, .bar a, .bar span
|
|
|
|
#append-selector.helper
|
|
%h3
|
|
%a(href="#append-selector")
|
|
append-selector(<span class="arg">$selector</span>, <span class="arg">$to-append</span>)
|
|
.details
|
|
%p
|
|
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.
|
|
%dl
|
|
%dg
|
|
%dt append-selector(".foo", ".bar")
|
|
%dd .foo.bar
|
|
%dg
|
|
%dt append-selector("p, div, span", ".bar")
|
|
%dd p.bar, div.bar, span.bar
|
|
|
|
#enumerate.helper
|
|
%h3
|
|
%a(href="#enumerate")
|
|
enumerate(<span class="arg">$prefix</span>, <span class="arg">$from</span>, <span class="arg">$through</span>, <span class="arg" data-default-value='-'>$separator</span>)
|
|
.details
|
|
%p
|
|
Enumerate the given <code>$prefix</code> from <code>$from</code> through <code>$through</code>.
|
|
%p <em>Note:</em> Using the <code>@extend</code> directive is usually preferred to this helper, which was created before <code>@extend</code> existed.
|
|
.examples
|
|
%h4 Examples
|
|
%ul
|
|
%li
|
|
%a(href="/examples/compass/helpers/enumerate/") Example of enumerate
|
|
%li
|
|
%a(href="/examples/compass/helpers/using-extend-in-place-of-enumerate/") Example of using <code>@extend</code> in place of enumerate
|
|
|
|
%a(name="headers")
|
|
#headings.helper
|
|
%h3
|
|
%a(href="#append-selector")
|
|
headings(<span class="arg" data-default-value="nil">$from</span>, <span class="arg" data-default-value="nil">$to</span>)
|
|
.details
|
|
%p
|
|
This helper function emits headings. It's best to just see it in action:
|
|
%p
|
|
<em>Note:</em> This function is aliased to <code>headers()</code>, both can be used interchangeably.
|
|
%dl
|
|
%dg
|
|
%dt headings()
|
|
%dd h1, h2, h3, h4, h5, h6
|
|
%dg
|
|
%dt headings(all)
|
|
%dd h1, h2, h3, h4, h5, h6
|
|
%dg
|
|
%dt headings(2)
|
|
%dd h1, h2
|
|
%dg
|
|
%dt headings(2,5)
|
|
%dd h2, h3, h4, h5
|
|
|