Ampersand (&) at the End, and Part of, a Selector in SASS

Ampersand (&) at the end, and part of, a selector in SASS

For Sass versions 3.2 and older, these are all of the valid ways to use the parent selector:

.foo {
    &, &.bar, &#bar, &:after, &[active] {
        color: red;
    }
}

.foo {
    .bar & {
        color: red;
    }
}

As of Sass 3.3, this is valid:

.foo {
    &bar, &-bar {
        color: red;
    }
}

As of Sass 3.4, this is valid:

.foo {
    $foo: &;
    @at-root bar#{&} {
        color: red;
    }
}

What is the meaning of an ampersand in Less selectors?

Less/Sass and other pre-processors let you write the CSS code with nested rules (besides other things like variables, mixins, and so on). So you don't have to write the full path like you do in CSS. You can just nest the style.

For example, you could have a structure like:

<parent>
    <child>
        <grandchild>
        </grandchild>
    </child>
</parent>

In plain CSS, to style every element you would write:

parent { styles }
parent child { styles }
parent child grandchild { styles }

With Less (and other preprocessors like SCSS) you can do the following

parent {
    some parent styles 
    & child {
        some child styles 
        & grandchild {
             some grandchild styles
        }
    }
 &:hover { hover styles on parent }
 &:before { pseudo element styles }
}

etc.

So, the use of & can be to enable style writing for elements that are in a relationship with the parent element ( in your case the .own-space ).

btn-box , -tra , -input-identifycode-con are direct children of the own-space element, and button is child of btn-box , span is child of button, grandchild of btn-box and , grandgrandchild ( :) ) of the own-pace. Anyway, you get the ideea :)

For the specific question .own-space { &-btn-box { ... } } would mean that there is an element with class own-space-btn-box which most probably is a child of own-space but NOT necessarily ( see end of answer ). The HTML seems to be structured in a BEM style but not according to the documentation and rules. When using preprocessors for styling it is highly recommended to use the BEM naming strategy. Take a look at it.

For example, the current structure COULD look like:

_{Stack Snippets do not accept SCSS. You can check out a working example here}

.own-space {

        &-btn-box {
          margin-bottom: 10px;

          button {
            padding-left: 0;

            span {
              color: #2D8CF0;
              transition: all .2s;
            }

            span:hover {
              color: #0C25F1;
              transition: all .2s;
            }
          }
        }

        &-tra {
          width: 10px;
          height: 10px;
          transform: rotate(45deg);
          position: absolute;
          top: 50%;
          margin-top: -6px;
          left: -3px;
          box-shadow: 0 0 2px 3px rgba(0, 0, 0, .1);
          background-color: white;
          z-index: 100;
        }

        &-input-identifycode-con {
          position: absolute;
          width: 200px;
          height: 100px;
          right: -220px;
          top: 50%;
          margin-top: -50px;
          border-radius: 4px;
          box-shadow: 0 0 2px 3px rgba(0, 0, 0, .1);
        }

      }

<div class="own-space">
  The SO snippet doesn't support CSS preprocessors.
   Example purposes only 
    <div class="own-space-btn-box">
      <button>Button</button>
      <span>Some span</span>
    </div>
    <div class="own-space-tra">
       Tra tra
    </div>
    <div class="own-space-input-identifycode-con">
      identifycode
    </div>
</div>

IMPORTANT when you see styles like these in most cases the elements ARE related but keep in mind when debugging other people's code that it's not always the case. They can be unrelated, e.g.

<element class="element"> ....  </element>
<element2 class="element-element2"> ....  </element2>

The SCSS could still look like this and have the same effect

.element { 
   styles
    &-element2 {
     styles
   }
}

See example -> not related

Another example use of & would be in the case you have two elements with a common class and a specific class, e.g.

 <element class="element specific1">....</element>
 <element class="element specific2">....</element>

You can add common styles and specific styles all together like

.element { 
   /* common styles */
   &.specific1 {
     /* specific 1 styles */
   }
   &.specific2 {
     /* specific 2 styles */
   }
}

There are a lot of different uses for &. Read more:

the-sass-ampersand
Sass parent selector
LESS
BEM naming

Can I use the ampersand in SASS to reference specific tags with the parent class?

What you're wanting for would in theory look like this:

.semantic {
    ul& {
        padding: 0;
        margin: 0;
    }
    p& {
        margin: 0;
    }
}

This is not possible because the & must be first. You're just going to have to deal with the fact that it isn't DRY and write it out by hand:

ul.semantic {
    padding: 0;
    margin: 0;
}

p.semantic {
    margin: 0;
}

As of Sass 3.3 or 3.4, it is possible using this syntax:

.semantic {
    ul#{&} {
        padding: 0;
        margin: 0;
    }
    p#{&} {
        margin: 0;
    }
}

Sass Ampersand nesting with pseudo selectors

This is because the ampersand is just concatenating the parent with the child. If you want the compiled CSS to look like your example you need to do this:

.test {
    &:first-child &-image{
      display: block;     
    }
}

in SASS, post selector ampersand doesnt work when used in a nested structure

Because the output of your sass would be:

.marker .container .parent .child {
  background: red;
}

Because you are telling the sass to output .marker & which is saying this is the parent of this chain, so .container is being treat as the first child of .marker.

You need to do:

.parent {
  .child {
    .container.marker & {
      background: red;
    }
  }
}

Which will output the vanilla CSS:

.container.marker .parent .child {
  background: red;
}

A great tool to help you understand how you sass outputs is http://sassmeister.com/

Append the parent selector to the end with Sass

Sass 3.2 and older

The only thing you can do is reverse your nesting or not nest at all:
.social-media {

    /* ... */

    .twitter { 
        /* ... */
    }
    .facebook {
        /* ... */
    }
}

ul.social-media {
    /* ... */
}

Sass 3.3 and later

You can do that using interpolation and the @at-root directive:

.social-media {
    /* ... */

    // Here's the solution:
    @at-root ul#{&} {
        /* ... */
    }
}

However, if your parent selector contains multiple selectors, you'll need to use selector-append instead:

.social-media, .doodads {
    /* ... */

    // Here's the solution:
    @at-root #{selector-append(ul, &)} {
        /* ... */
    }
}

Output:

.social-media, .doodads {
  /* ... */
}
ul.social-media, ul.doodads {
  /* ... */
}

Ampersand (&) at the End, and Part of, a Selector in SASS