Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.1)
// Compass (v1.0.1)
// ----

// typography
// monochrome - dark to light
$black: #000;
$gray-10: #121212;
$gray-20: #333;
$gray-30: #666;
$gray-40: #999;
$gray-45: #b3b3b3;
$gray-50: #ccc;
$gray-60: #e2e2e2;
$gray-70: #ebebeb;
$gray-80: #f3f3f3;
$gray-90: #f7f7f7;
$white: #fff;

// blue - dark to light
$blue-10: #004276;
$blue-20: #326891;
$blue-30: #6288a5;
$blue-40: #879cb4;
$blue-50: #f0f8fc;

// red - dark to light
$red-10: #a81817;
$red-20: #d31e25;

// yellow - dark to light
$yellow-10: #c5a257;
$yellow-20: #f8f8d4;
$yellow-30: #fbfbea;

// misc - dark to light
$newsprint-10: #bab8b3;
$newsprint-20: #e9ebe4;
$newsprint-25: #f4f5f2;
$newsprint-30: #f7f7f5;

$text-color: $gray-20;

$link-color: $blue-20;
$link-visited-color: $blue-20;

// font weights
$bold: 700;
$medium-bold: 600;
$medium: 500;
$normal: 400;
$light: 300;
$extra-light: 200;


$base-font-size: 16; //px

// font stacks

$sans-base: arial, helvetica, sans-serif;
$sans-franklin: "nyt-franklin", $sans-base;
$sans: $sans-franklin;

$serif-base: georgia, "times new roman", times, serif;
$serif-chelt: "nyt-cheltenham", $serif-base;
$serif-chelt-x-cn-bd: "nyt-cheltenham-extra-cn-bd", $serif-base;
$serif-chelt-sh: "nyt-cheltenham-sh", $serif-base;
$serif-karnak: "nyt-karnak-display", "nyt-karnak-display-130124", $serif-base;
$serif-stymie: "nyt-stymie", $serif-base;
$serif: $serif-chelt;

$base-font-family: $serif;
$alt-font-family:  $sans;

// grid system
$grid-unit: 45px;
$grid-unit-mini: 15px;
$grid-unit-micro: 7px;


// shorthand for font size / line height
@mixin font($family, $size, $line-height, $weight: $normal, $base-size: $base-font-size) {
    $new-size: ($size / $base-size);
    $new-line-height: ($line-height / $base-size);
    font-size: ($size + px);
    font-size: ($new-size + rem);
    line-height: ($line-height + px);
    line-height: ($new-line-height + rem);
    font-weight: $weight;
    font-family: $family;
}

@mixin runaround ($direction, $top, $right, $bottom, $left) {
    float: $direction;
    clear: $direction;
    margin: $top $right $bottom $left;
}

// grid
@mixin span ($standard: 0, $mini: 0, $micro: 0) {
    width: (($standard * $grid-unit) + ($mini * $grid-unit-mini) + ($micro * $grid-unit-micro));
}

@mixin span-max-width ($standard: 0, $mini: 0, $micro: 0) {
	max-width: (($standard * $grid-unit) + ($mini * $grid-unit-mini) + ($micro * $grid-unit-micro));
}

// offsets
@mixin offset ($standard: 0, $mini: 0, $micro: 0, $direction: left) {
	$total: (($standard * $grid-unit) + ($mini * $grid-unit-mini) + ($micro * $grid-unit-micro));
	
	@if $direction == top {
    	margin-top: $total;
    }
    @if $direction == right {
    	margin-right: $total;
    } @else if $direction == bottom { 
    	margin-bottom: $total;  	
    } @else if $direction == left {
    	margin-left: $total;
    }
    
}

@mixin single-rule ($border-width: 1px, $border-style: solid, $border-color: $gray-50, $location: top) {
     
     $border-properties: $border-width $border-style $border-color;    
     
     @if $location == top {
        border-top: $border-properties;
        padding-top: $grid-unit-micro;
     } @else if $location == bottom {
        border-bottom: $border-properties;
        padding-bottom: $grid-unit-micro;
     } @else if $location == right {
        border-right: $border-properties;
        padding-right: $grid-unit-micro;
     } @else if $location == left {
        border-left: $border-properties;
        padding-left: $grid-unit-micro;  
     }

} // end single-rule

@mixin no-single-rule ($location: top) {

     @if $location == top {
        border-top: none;
        padding-top: 0;
     } @else if $location == bottom {
        border-bottom: none;
        padding-bottom: 0;
     } @else if $location == right {
        border-right: none;
        padding-right: 0;
     } @else if $location == left {
        border-left: none;
        padding-left: 0;  
     }

}

.media-layout-small-vertical-lede {
	@include span(4); // 180
	@include single-rule;
	@include no-single-rule(bottom);
  @include runaround(right, 5px, 0, $grid-unit-mini, $grid-unit);

    .caption,
    .credit {
        @include font($serif-chelt-sh, 12, 16);
    }

    .has-big-ad & {
        padding-right: 120px;
        padding-bottom: $grid-unit-micro;
        border-bottom: 1px solid $gray-60;

        .caption {
            @include span(2, 1); // 105
            position: absolute;
            right: 0;
            bottom: 23px;
        }

    }

    .has-half-page & {
        @include span(3, 1); // 150
        @include runaround(left, 5px, $grid-unit-mini, $grid-unit, 0);
    }

} // end media-layout-small-vertical-lede

SassMeister-output.css

.media-layout-small-vertical-lede {
  width: 180px;
  border-top: 1px solid #ccc;
  padding-top: 7px;
  border-bottom: none;
  padding-bottom: 0;
  float: right;
  clear: right;
  margin: 5px 0 15px 45px;
}
.media-layout-small-vertical-lede .caption,
.media-layout-small-vertical-lede .credit {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 16px;
  line-height: 1rem;
  font-weight: 400;
  font-family: "nyt-cheltenham-sh", georgia, "times new roman", times, serif;
}
.has-big-ad .media-layout-small-vertical-lede {
  padding-right: 120px;
  padding-bottom: 7px;
  border-bottom: 1px solid #e2e2e2;
}
.has-big-ad .media-layout-small-vertical-lede .caption {
  width: 105px;
  position: absolute;
  right: 0;
  bottom: 23px;
}
.has-half-page .media-layout-small-vertical-lede {
  width: 150px;
  float: left;
  clear: left;
  margin: 5px 15px 45px 0;
}