What is the double hyphen in scss?

Question

I'm new to SASS and cam across something I don't understand. In one of my projects I see a developer setup some inheritance like this:

&--outline,
&--outline:focus,
&--outline:active {
    background-color: #fff;
    color: color($colors, navia_orange, base);
    border: 1px solid color($colors, navia_orange, base);

    &.button-md, &.button-ios {
        box-shadow: unset;

        &.activated {
            background-color: #fff;
            color: color($colors, navia_orange, base);
            border: 1px solid color($colors, navia_orange, base);
        }
    }
}

I know the '&' is a way of inserting the parent selector. But what does the '--' do?

Answer 1

& refers to parent, so this is meaningless, unless nested. But imagine what happens when it is nested inside, e.g. .button:

.button {
  &--outline {
    /* ... */
  }
}

produces a derived class name:

.button--outline {
  /* ... */
}

that would indicate e.g. an element like this:

<button class="button--outline">...</button>

tl;dr: -- is absolutely nothing special. It doesn't do anything. It just gets concatenated.

Answer 2

Double hyphen is a modifier used in BEM (Block, Element, Modifier) methodology, which helps you organize your stylesheet. It has nothing to do with Sass.

In this case it takes advantage of Sass syntax, which let you write nested selectors, and that's why it is written this way. The other way it would be looking like: .block-or-element--outline {}.