Generated by SassMeister.com.

SassMeister-input-HTML.markdown

SassMeister-input.scss

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----

// Extra small screen / phone
// Note: Deprecated $screen-xs and $screen-phone as of v3.0.1
$screen-xs: 480px !default;
$screen-xs-min: $screen-xs !default;
$screen-phone: $screen-xs-min !default;

// Small screen / tablet
// Note: Deprecated $screen-sm and $screen-tablet as of v3.0.1
$screen-sm: 768px !default;
$screen-sm-min: $screen-sm !default;
$screen-tablet: $screen-sm-min !default;

//

// Medium screen / desktop
// Note: Deprecated $screen-md and $screen-desktop as of v3.0.1
$screen-md: 992px !default;
$screen-md-min: $screen-md !default;
$screen-desktop: $screen-md-min !default;

//

// Large screen / wide desktop
// Note: Deprecated $screen-lg and $screen-lg-desktop as of v3.0.1
$screen-lg: 1200px !default;
$screen-lg-min: $screen-lg !default;
$screen-lg-desktop: $screen-lg-min !default;

//

// So media queries don't overlap when required, provide a maximum
$screen-xs-max: $screen-sm-min - 1 !default;
$screen-sm-max: $screen-md-min - 1 !default;
$screen-md-max: $screen-lg-min - 1 !default;

//
//
// Fonts
$xsmall-font: 10px;
$small-font: 11px;
$normal-font: 13px;
$medium-font: 13px;
$xmedium-font: 14px;
$xxmedium-font: 16px;
$large-font: 18px;
$xlarge-font: 24px;
$phone-h1-font: 22px;
$xxlarge-font: 30px;

$font-family: "Helvetica", Helvetica, Arial, sans-serif;
$font-family-secondary: Georgia;
$icon-font: "urbanspoon-icons";

$icon-sprite-path: "glyphicons-halflings.png";
$icon-white-sprite-path: "glyphicons-halflings-white.png";

// Colors
$primary-color: #002654;
$secondary-color: #ffc52e;
$white: white;
$black: black;
$near-black: #222222;
$darkest-gray: #333333;
$medium-gray: #666666;
$light-gray: #aaaaaa;
$lighter-gray: #dddddd;
$lightest-gray: #eeeeee;

$required-text-color: #d55a24;
$title-color: $black;
$link-color: #0144a7;
$btn-bg-primary: #0d3d77;
$btn-hover: #e6e6e6;
$btn-text-hover: #333333;
$error-text: #dd4b39;

$border-color: $lightest-gray;
$border-color-light: #eeeeee;
$border-color-dark: #aaaaaa;
$section-border: #cdbd98;
$light-yellow-bg-color: #fdf6d7;
$yellow-text-color: $secondary-color;
$yellow-bg-color: $secondary-color;
$yellow-border-color: $secondary-color;
$required-text-color: $secondary-color;
$blue-border-color: #accaed;

// Old Urbanspoon Colors
$title-color-old: #d04102;
$light-blue: #364074;
$dark-blue: #232a56;
$dark-brown: #4f453b;
$brown: #cdbd9b;
$light-brown: #efeadf;
$orange: #d04102;
$bright-yellow: #ffcf01;

// Spaces: used with _spaces.sass
$padding-x: 5px;
$padding-s: 10px;
$padding-m: 20px;
$padding-l: 30px;
$padding-xl: 40px;

// Modal Widths
$modal-wide: 800px;
$modal: 560px;
$modal-small: 300px;
$modal-zIndex: 20000;

// Bootstrap overrides
$base-line-height: 1.42857 !default;
$btn-primary-background: #002654;
$grid-gutter-width: 40px;
$dropdown-link-background-hover: $primary-color;
$container-desktop: 940px + $grid-gutter-width;

// Legacy header styles to be removed
$header-light-gradient: #364074;
$header-dark-gradient: #232a56;

$cta-light-gradient: #fce08e;
$cta-dark-gradient: #f9c11e;

$search-light-gradient: #ffd448;
$search-dark-gradient: #ffbd00;

$header-blue-light-gradient: #2f3e76;
$header-blue-dark-gradient: #1f2c5b;

@mixin screen-xs {
  @media only screen and (max-width: $screen-xs-max) {
    @content;
  }
}

@mixin screen-sm {
  @media only screen and (min-width: $screen-sm-min) {
    @content;
  }
}

@mixin screen-md {
  @media only screen and (min-width: $screen-md-min) {
    @content;
  }
}

@mixin screen-lg {
  @media only screen and (min-width: $screen-lg-min) {
    @content;
  }
}

// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

$rem-base: 14px !default;

@function rem-calc($values, $base-value: $rem-base) {
  $max: length($values);
  @if $max == 1 {
    @return convert-to-rem(nth($values, 1), $base-value);
  }
  $remValues: ();
  @for $i from 1 through $max {
    $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
  }
  @return $remValues;
}

@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

@function convert-to-rem($value, $base-value: $rem-base) {
  $value: strip-unit($value) / strip-unit($base-value) * 1rem;
  @if $value == 0rem {
    $value: 0;
  }
  // Turn 0rem into 0
  @return $value;
}

//
// Block Grid Variables
//
$default-float: left;

@mixin clearfix {}

$modules: () !default;

@mixin exports($name) {
  @if index($modules, $name) == false {
    $modules: append($modules, $name);
    @content;
  }
}

$include-html-grid-classes: false;
$include-xl-html-block-grid-classes: false !default;

// We use this to control the maximum number of block grid elements per row
$block-grid-elements: 12 !default;
$block-grid-default-spacing: $grid-gutter-width / 2;

$align-block-grid-to-grid: true !default;

@if $align-block-grid-to-grid {
  $block-grid-default-spacing: $grid-gutter-width / 2;
}

// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
$block-grid-media-queries: true !default;

//
// Block Grid Mixins
//

// Create a custom block grid
//
// $per-row - # of items to display per row. Default: false.
// $spacing - # of ems to use as padding on each block item. Default: rem-calc(20).
// $base-style - Apply a base style to block grid. Default: true.
@mixin block-grid($per-row: false, $spacing: $block-grid-default-spacing, $include-spacing: true, $base-style: true) {
  @if $base-style {
    display: block;
    padding: 0;
    @if $align-block-grid-to-grid {
      margin: 0;
    }
    @else {
      margin: 0 - $spacing / 2;
    }
    @include clearfix;
    & > li {
      display: block;
      height: auto;
      float: $default-float;
      @if $include-spacing {
        padding: 0 $spacing / 2 $spacing;
      }
    }
  }
  @if $per-row {
    & > li {
      width: 100% / $per-row;
      @if $include-spacing {
        padding: 0 $spacing / 2 $spacing;
      }
      list-style: none;
      &:nth-of-type(n) {
        clear: none;
      }
      &:nth-of-type(#{$per-row}n+1) {
        clear: both;
      }
      @if $align-block-grid-to-grid {
        @include block-grid-aligned($per-row, $spacing);
      }
    }
  }
}

@mixin block-grid-aligned($per-row, $spacing) {
  @for $i from 1 through $block-grid-elements {
    @if $per-row >= $i {
      $grid-column: "+" + $i;
      @if $per-row == $i {
        $grid-column: "";
      }
      &:nth-of-type(#{$per-row}n#{unquote($grid-column)}) {
        padding-left: $spacing - $spacing / $per-row * ($per-row - ($i - 1));
        padding-right: $spacing - $spacing / $per-row * $i;
      }
    }
  }
}

// Generate presentational markup for block grid.
//
// $size - Name of class to use, i.e. "large" will generate .large-block-grid-1, .large-block-grid-2, etc.
@mixin block-grid-html-classes($size, $include-spacing) {
  @for $i from 1 through $block-grid-elements {
    .#{$size}-block-grid-#{$i} {
      @include block-grid($i, $block-grid-default-spacing, $include-spacing, false);
    }
  }
}

@include exports("block-grid") {
  @if $include-html-grid-classes {
    [class*="block-grid-"] {
      @include block-grid;
    }
    @if $block-grid-media-queries {
      @media #{$small-up} {
        @include block-grid-html-classes($size: small, $include-spacing: false);
      }
      @media #{$medium-up} {
        @include block-grid-html-classes($size: medium, $include-spacing: false);
      }
      @media #{$large-up} {
        @include block-grid-html-classes($size: large, $include-spacing: false);
      }
      @if $include-xl-html-block-grid-classes {
        @media #{$xlarge-up} {
          @include block-grid-html-classes($size: xlarge, $include-spacing: false);
        }
        @media #{$xxlarge-up} {
          @include block-grid-html-classes($size: xxlarge, $include-spacing: false);
        }
      }
    }
  }
}


.list {
  @include screen-xs {
    @include block-grid(3);
  }

  @include screen-sm {
    @include block-grid(6);
  }
}

SassMeister-output.css

Invalid CSS after "... 480px !default": expected selector or at-rule, was "$screen-xs-min:..."

SassMeister-rendered.html

<div class="chevron left"></div>

<p><br></p>

<div class="chevron right"></div>