ericdfields/application.css

## application.css
/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require_self
 *= require screen
*/

## dashboard_base.scss
.exit_dashboard {
  // appearance
  background: #444;
  line-height: 2em;
  a {
    color: white;
    @extend .small;
    text-decoration: none;
  }
  // layout
  text-align: center;
  @include respond-to(small_screens) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: left;
    text-indent: .5em;
  }
}

## gistfile1.txt
Sass::SyntaxError in Pages#dashboard

Showing /Users/eric/Development/hhd/app/views/layouts/application.html.erb where line #24 raised:

Invalid CSS after "...small_screens) ": expected "}", was "{"
  (in /Users/eric/Development/hhd/app/assets/stylesheets/screen.scss)
Extracted source (around line #24):

21:
22:   <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
23:
24:   <%= stylesheet_link_tag    "application" %>
25:   <%= csrf_meta_tags %>
26:
27:   <!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->
Rails.root: /Users/eric/Development/hhd

Application Trace | Framework Trace | Full Trace
app/assets/stylesheets/dashboard/_base.scss:123
app/assets/stylesheets/screen.scss:12
app/views/layouts/application.html.erb:24:in `_app_views_layouts_application_html_erb___2675937973595408882_70149886176720'

## mixins.scss
/* work in progress… don't judge my queries ;) */

@mixin respond-to($media) {
  @if $media == small_portrait {
    @media screen and (min-width:320px) {
      @content;
    }
  }
  @else if $media == small_landscape {
    @media screen and (min-width:480px) {
      @content;
    }
  }
  @else if $media == small_screens {
    @media screen and (min-width:600px) {
      @content;
    }
  }
  @else if $media == only_small_screens {
    @media screen and (max-width:768px) {
      @content;
    }
  }
  @else if $media == standard_portrait {
    @media screen and (min-width:768px) {
      @content;
    }
  }
  @else if $media == standard_landscape {
    @media screen and (min-width:1024px) {
      @content;
    }
  }
  @else if $media == wide {
    @media screen and (min-width:1366px) {
      @content;
    }
  }
}

## screen.scss
@import 'mixins';
@import 'dashboard/base';
	/*
	* This is a manifest file that'll automatically include all the stylesheets available in this directory
	* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
	* the top of the compiled file, but it's generally better to create a new file per style scope.
	*= require_self
	*= require screen
	*/
	.exit_dashboard {
	// appearance
	background: #444;
	line-height: 2em;
	a {
	color: white;
	@extend .small;
	text-decoration: none;
	}
	// layout
	text-align: center;
	@include respond-to(small_screens) {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	text-align: left;
	text-indent: .5em;
	}
	}
	Sass::SyntaxError in Pages#dashboard

	Showing /Users/eric/Development/hhd/app/views/layouts/application.html.erb where line #24 raised:

	Invalid CSS after "...small_screens) ": expected "}", was "{"
	(in /Users/eric/Development/hhd/app/assets/stylesheets/screen.scss)
	Extracted source (around line #24):

	21:
	22: <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
	23:
	24: <%= stylesheet_link_tag "application" %>
	25: <%= csrf_meta_tags %>
	26:
	27: <!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->
	Rails.root: /Users/eric/Development/hhd

	Application Trace \| Framework Trace \| Full Trace
	app/assets/stylesheets/dashboard/_base.scss:123
	app/assets/stylesheets/screen.scss:12
	app/views/layouts/application.html.erb:24:in `_app_views_layouts_application_html_erb___2675937973595408882_70149886176720'
	/* work in progress… don't judge my queries ;) */

	@mixin respond-to($media) {
	@if $media == small_portrait {
	@media screen and (min-width:320px) {
	@content;
	}
	}
	@else if $media == small_landscape {
	@media screen and (min-width:480px) {
	@content;
	}
	}
	@else if $media == small_screens {
	@media screen and (min-width:600px) {
	@content;
	}
	}
	@else if $media == only_small_screens {
	@media screen and (max-width:768px) {
	@content;
	}
	}
	@else if $media == standard_portrait {
	@media screen and (min-width:768px) {
	@content;
	}
	}
	@else if $media == standard_landscape {
	@media screen and (min-width:1024px) {
	@content;
	}
	}
	@else if $media == wide {
	@media screen and (min-width:1366px) {
	@content;
	}
	}
	}