Generated by SassMeister.com.

SassMeister-input-HTML.html

<p class="40-60%-shares-key">foo</p>

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

$dgry: wanting;
$nw: to;
$bgry: kick;
$bold: a;
$dgrn: baby;
$blk: right;
$w: now;
$let: 2;
$lh: 1;
$p: 1;
$grn: red;
$nav: 1;

@mixin bp($foo) {
  @content;
}

@mixin transition($foo) {
  
}

.ui {
    &-tabs {
        border-bottom: 2px solid $dgry;

        &-nav { 
            background: $nw;
            border-bottom: 1px solid $bgry;

            li {
                float: left;
                margin: -2px 1px 0 0;
                white-space: nowrap;

                a {
                    float: left;
                    font-weight: $bold;
                    padding: 0 $let*.5em;
                    line-height: 1.5*($lh/$p);

                    &:focus {
                        outline: 0;
                    }

                    @include bp(minMob) {
                        padding: 0 $let*1em;
                    }
                }

                &.ui-tabs-active {
                    margin-bottom: -2px;
                    padding-bottom: 1px;
                }
            }

            @include bp(minMob) {
                padding-left: $let*1em;
            }
        }

        &-panel { 
            padding: $let*1em $let*.5em 0;

            @include bp(minMob) {
                float: left;
                width: 100%;
            }

            @include bp(minTab) {
                padding: $let*1em 0 0;
            }

            #tabsExtra & {
                @include bp(minMob) {
                    padding: $let*1em $let*1em 0;
                }
            }                
        }
    }

    &-tabs &-state-default {
        background: $nw;

        a {
            border-top: 2px solid $dgrn;
            border-left: 1px solid $bgry;
            border-right: 1px solid $bgry;
            color: $blk;
        }
    }

    &-tabs &-state-hover, &-tabs &-state-active {
        background: $w;

        a {
            border-top-color: $grn;
        }
    }
}

.tab {
    &-list-item {
        margin-bottom: $let*1em;

        @include bp(minMob) {
            border-left: 19px solid $w;
            float: left;
            padding: 0 $let*.5em;
            width: 50%;
        }

        @include bp(minTab) {
            padding: 0 0 0 $let*1em;
            width: (100%/3);
        }
    }

    &-country-flag {
        float: left;

        @include bp(minMob) {
            margin-left: -19px;
        }
    }

    &-country-title, &-city {
        border-bottom: 1px solid lighten($grn,30%);
    }

    &-country-title {
        border-top: 2px solid $grn;
        display: block;
        clear: none;
        font-size: ($nav/$p)*1em;
        height: 45px;
        margin: 0 0 0 54px;
        padding-top: 11px;
        text-align: right;
        @include transition(border-color .2s ease-out);

        .tab-list-item:hover & {
            border-top-color: $dgry;      
        }

        @include bp(minMob) {
            margin-left: 35px;
        }
    }

    &-city {
        z-index: 10;

        &:hover {
            background: $nw;
        }

        &-name {
            a {
                display: block;
                padding: $let*.25em 70px $let*.25em 20px;
            }
        }
    }
}

.tourTypeBadges {
    position: absolute;
    right: 3px;
    top: 0;
}

.tourType {
    height: 15px;
    float: right;
    margin-top: 10px;
    margin-right: -3px;
}

SassMeister-output.css

.ui-tabs {
  border-bottom: 2px solid wanting;
}
.ui-tabs-nav {
  background: to;
  border-bottom: 1px solid kick;
  padding-left: 2em;
}
.ui-tabs-nav li {
  float: left;
  margin: -2px 1px 0 0;
  white-space: nowrap;
}
.ui-tabs-nav li a {
  float: left;
  font-weight: a;
  padding: 0 1em;
  line-height: 1.5;
  padding: 0 2em;
}
.ui-tabs-nav li a:focus {
  outline: 0;
}
.ui-tabs-nav li.ui-tabs-active {
  margin-bottom: -2px;
  padding-bottom: 1px;
}
.ui-tabs-panel {
  padding: 2em 1em 0;
  float: left;
  width: 100%;
  padding: 2em 0 0;
}
#tabsExtra .ui-tabs-panel {
  padding: 2em 2em 0;
}
.ui-tabs .ui-state-default {
  background: to;
}
.ui-tabs .ui-state-default a {
  border-top: 2px solid baby;
  border-left: 1px solid kick;
  border-right: 1px solid kick;
  color: right;
}
.ui-tabs .ui-state-hover, .ui-tabs .ui-state-active {
  background: now;
}
.ui-tabs .ui-state-hover a, .ui-tabs .ui-state-active a {
  border-top-color: red;
}

.tab-list-item {
  margin-bottom: 2em;
  border-left: 19px solid now;
  float: left;
  padding: 0 1em;
  width: 50%;
  padding: 0 0 0 2em;
  width: 33.33333%;
}
.tab-country-flag {
  float: left;
  margin-left: -19px;
}
.tab-country-title, .tab-city {
  border-bottom: 1px solid #ff9999;
}
.tab-country-title {
  border-top: 2px solid red;
  display: block;
  clear: none;
  font-size: 1em;
  height: 45px;
  margin: 0 0 0 54px;
  padding-top: 11px;
  text-align: right;
  margin-left: 35px;
}
.tab-list-item:hover .tab-country-title {
  border-top-color: wanting;
}
.tab-city {
  z-index: 10;
}
.tab-city:hover {
  background: to;
}
.tab-city-name a {
  display: block;
  padding: 0.5em 70px 0.5em 20px;
}

.tourTypeBadges {
  position: absolute;
  right: 3px;
  top: 0;
}

.tourType {
  height: 15px;
  float: right;
  margin-top: 10px;
  margin-right: -3px;
}

SassMeister-rendered.html

<p class="40-60%-shares-key">foo</p>