Compass/compass

--- 
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(<span class="arg">$selector1</span>, <span class="arg">$selector2</span>, ...)
  .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