Generated by SassMeister.com.

SassMeister-input-HTML.html

<ul class="comp-list" data-component-ui="vehicle-offer-list">
    <li class="comp-list__item">
        <a href="#" class="comp-list__details">
            <div class="media">
                <img src="http://placehold.it/250x150" alt=""  class="media__img" />
                <div class="media__body">
                    <ul class="bare-list">
                        <li class="comp-list__emphase">{Bruttopreis}</li>
                        <li class="comp-list__emphase js-is-hidden">{Nettopreis}</li>
                        <li>{Beschreibung der Austattungsmerkmale}</li>
                        <li class="comp-list__status">{Status (Lieferbarkeit}</li>
                    </ul>
                </div>
            </div>
        </a>
    </li>
    <li class="comp-list__item">
        <a href="#" class="comp-list__details">
            <div class="media">
                <img src="http://placehold.it/250x150" alt="" class="media__img" />
                <div class="media__body">
                    <ul class="bare-list">
                        <li class="comp-list__emphase">{Bruttopreis}</li>
                        <li class="comp-list__emphase js-is-hidden">{Nettopreis}</li>
                        <li>{Beschreibung der Austattungsmerkmale}</li>
                        <li class="comp-list__status">{Status (Lieferbarkeit}</li>
                    </ul>
                </div>
            </div>
        </a>
    </li>
    <li class="comp-list__item">
        <a href="#" class="comp-list__details">
            <div class="media">
                <img src="http://placehold.it/250x150" alt="" class="media__img" />
                <div class="media__body">
                    <ul class="bare-list">
                        <li class="comp-list__emphase">{Bruttopreis}</li>
                        <li class="comp-list__emphase js-is-hidden">{Nettopreis}</li>
                        <li>{Beschreibung der Austattungsmerkmale}</li>
                        <li class="comp-list__status">{Status (Lieferbarkeit}</li>
                    </ul>
                </div>
            </div>
        </a>
    </li>
    <li class="comp-list__item">
        <a href="#" class="comp-list__details">
            <div class="media">
                <img src="http://placehold.it/250x150" alt="" class="media__img" />
                <div class="media__body">
                    <ul class="bare-list">
                        <li class="comp-list__emphase">{Bruttopreis}</li>
                        <li class="comp-list__emphase js-is-hidden">{Nettopreis}</li>
                        <li>{Beschreibung der Austattungsmerkmale}</li>
                        <li class="comp-list__status">{Status (Lieferbarkeit}</li>
                    </ul>
                </div>
            </div>
        </a>
    </li>
</ul>

SassMeister-input.scss

// ----
// libsass (v2.0.0)
// ----

%template {
   
 margin: 0;
 padding: 0;
 list-style: none;  
  
}




/**
 * Component
 * 
 * Comprises other abstracts (s. below) and introduce some
 * component related elements 
 */
.comp-list {
  
  @extend %template;
  
  .comp-list__item {
    background-color: gray;
  }
  .comp-list__details {
    display: block;
    text-decoration: none;
  }

  .comp-list__emphase {
    font-weight: 700;
  }

  .comp-list__status {
    font-size: 80%;
  }

}

.comp-list--invert-items {
  > .comp-list__item:nth-child(2n){
    background-color: silver;
  } 
}

  



.js-is-hidden {}



/**
 * All abstracts below we get for free to use within
 * our `comp-list` component as they exists anyway
 * in our CSS. 
 */

/**
 * Abstract
 */
.bare-list {
  margin:  0;
  padding: 0;
  list-style: none;
}



/**
 * Abstract
 */
.clearfix,
%clearfix {

    &:after {
        content: "";
        display: table;
        clear: both;
    }

}


/**
 * Abstract
 */
.media {
    @extend %clearfix;
    display: block;
}

    .media__img {
        float: left;
        margin-right: 28px;

        > img {
            display: block;
        }

    }

    .media__body {
        overflow: hidden;
        display: block;

        &,
        > :last-child {
            margin-bottom: 0;
        }

    }

    /**
     * Abstract modifier, s. HTML on line 49
     */
    .media--rev {

        > .media__img {
            float: right;
            margin-right: 0;
            margin-left: 28px;
        }

    }

SassMeister-output.css

.comp-list {
  margin: 0;
  padding: 0;
  list-style: none; }

/**
 * Component
 * 
 * Comprises other abstracts (s. below) and introduce some
 * component related elements 
 */
.comp-list .comp-list__item {
  background-color: gray; }
.comp-list .comp-list__details {
  display: block;
  text-decoration: none; }
.comp-list .comp-list__emphase {
  font-weight: 700; }
.comp-list .comp-list__status {
  font-size: 80%; }

.comp-list--invert-items > .comp-list__item:nth-child(2n) {
  background-color: silver; }

/**
 * All abstracts below we get for free to use within
 * our `comp-list` component as they exists anyway
 * in our CSS. 
 */
/**
 * Abstract
 */
.bare-list {
  margin: 0;
  padding: 0;
  list-style: none; }

/**
 * Abstract
 */
.media:after {
  content: "";
  display: table;
  clear: both; }

/**
 * Abstract
 */
.media {
  display: block; }

.media__img {
  float: left;
  margin-right: 28px; }
  .media__img > img {
    display: block; }

.media__body {
  overflow: hidden;
  display: block; }
  .media__body, .media__body > :last-child {
    margin-bottom: 0; }

/**
     * Abstract modifier, s. HTML on line 49
     */
.media--rev > .media__img {
  float: right;
  margin-right: 0;
  margin-left: 28px; }

SassMeister-rendered.html

<ul class="comp-list" data-component-ui="vehicle-offer-list">
    <li class="comp-list__item">
        <a href="#" class="comp-list__details">
            <div class="media">
                <img src="http://placehold.it/250x150" alt=""  class="media__img" />
                <div class="media__body">
                    <ul class="bare-list">
                        <li class="comp-list__emphase">{Bruttopreis}</li>
                        <li class="comp-list__emphase js-is-hidden">{Nettopreis}</li>
                        <li>{Beschreibung der Austattungsmerkmale}</li>
                        <li class="comp-list__status">{Status (Lieferbarkeit}</li>
                    </ul>
                </div>
            </div>
        </a>
    </li>
    <li class="comp-list__item">
        <a href="#" class="comp-list__details">
            <div class="media">
                <img src="http://placehold.it/250x150" alt="" class="media__img" />
                <div class="media__body">
                    <ul class="bare-list">
                        <li class="comp-list__emphase">{Bruttopreis}</li>
                        <li class="comp-list__emphase js-is-hidden">{Nettopreis}</li>
                        <li>{Beschreibung der Austattungsmerkmale}</li>
                        <li class="comp-list__status">{Status (Lieferbarkeit}</li>
                    </ul>
                </div>
            </div>
        </a>
    </li>
    <li class="comp-list__item">
        <a href="#" class="comp-list__details">
            <div class="media">
                <img src="http://placehold.it/250x150" alt="" class="media__img" />
                <div class="media__body">
                    <ul class="bare-list">
                        <li class="comp-list__emphase">{Bruttopreis}</li>
                        <li class="comp-list__emphase js-is-hidden">{Nettopreis}</li>
                        <li>{Beschreibung der Austattungsmerkmale}</li>
                        <li class="comp-list__status">{Status (Lieferbarkeit}</li>
                    </ul>
                </div>
            </div>
        </a>
    </li>
    <li class="comp-list__item">
        <a href="#" class="comp-list__details">
            <div class="media">
                <img src="http://placehold.it/250x150" alt="" class="media__img" />
                <div class="media__body">
                    <ul class="bare-list">
                        <li class="comp-list__emphase">{Bruttopreis}</li>
                        <li class="comp-list__emphase js-is-hidden">{Nettopreis}</li>
                        <li>{Beschreibung der Austattungsmerkmale}</li>
                        <li class="comp-list__status">{Status (Lieferbarkeit}</li>
                    </ul>
                </div>
            </div>
        </a>
    </li>
</ul>