Generated by SassMeister.com.

SassMeister-input-HTML.html

 <ul class="faq__list">
                        <li class="faq__item">
                            Unte, oponsul icaes, que ture factoraet?

                            <div class="btn--circle--small">
                                <i class="icon icon--ui__arrow-right-large">
                                    <svg>
                                        <use xlink:href="/media/images/sprites/ui.svg#arrow-right-large" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
                                    </svg>
                                </i>
                            </div><!--/.btn--cirlce -->
                        </li>
                        <li class="faq__item">
                            Unte, oponsul icaes, que ture factoraet?

                            <div class="btn--circle--small">
                                <i class="icon icon--ui__arrow-right-large">
                                    <svg>
                                        <use xlink:href="/media/images/sprites/ui.svg#arrow-right-large" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
                                    </svg>
                                </i>
                            </div><!--/.btn--cirlce -->
                        </li>
                    </ul>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

$colors: (
  green: #95c11e,
  red: #e30512,
  yellow: #ffde44,
  blue: #009ee2,
  orange: #f39200
);

$sections: (
  work: map-get($colors, green),
  director: map-get($colors, red),
  contact: map-get($colors, yellow),
  about: map-get($colors, blue),
  news: map-get($colors, orange)
);



@mixin sections() {
  @each $name, $color in $sections {
    $color: $color !global;

     &--#{$name} {
      @content
     }
  }
}

.selector {
  color: red;
}

.selector {
  @include sections {
    border: 1px solid $color;
  }
}

SassMeister-output.css

.selector {
  color: red;
}

.selector--work {
  border: 1px solid #95c11e;
}

.selector--director {
  border: 1px solid #e30512;
}

.selector--contact {
  border: 1px solid #ffde44;
}

.selector--about {
  border: 1px solid #009ee2;
}

.selector--news {
  border: 1px solid #f39200;
}

SassMeister-rendered.html

 <ul class="faq__list">
                        <li class="faq__item">
                            Unte, oponsul icaes, que ture factoraet?

                            <div class="btn--circle--small">
                                <i class="icon icon--ui__arrow-right-large">
                                    <svg>
                                        <use xlink:href="/media/images/sprites/ui.svg#arrow-right-large" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
                                    </svg>
                                </i>
                            </div><!--/.btn--cirlce -->
                        </li>
                        <li class="faq__item">
                            Unte, oponsul icaes, que ture factoraet?

                            <div class="btn--circle--small">
                                <i class="icon icon--ui__arrow-right-large">
                                    <svg>
                                        <use xlink:href="/media/images/sprites/ui.svg#arrow-right-large" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
                                    </svg>
                                </i>
                            </div><!--/.btn--cirlce -->
                        </li>
                    </ul>