alettieri/An-Anonymous-Pen.markdown

## An-Anonymous-Pen.markdown

      
    Raw
  

              An-Anonymous-Pen.markdown
            
          
    An Anonymous Pen

A Pen by Secret Sam on CodePen.
License.

  
## index.html
<head>
  <meta class='my-small-query' />
  <meta class='my-medium-query' />
</head>

<div>
</div>

## script.js
$(document).ready(function(){
var queries = {

  small: $('.my-small-query').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''),

  medium: $('.my-medium-query').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, '')

};

console.log( queries );

});

## style.scss
@import "compass";
$sm-query: "only screen and (max-width: 40em)";
$med-query: "only screen and (min-width:40.063em)";

meta {
  &.my-small-query {
    font-family: "/" + unquote( $sm-query ) + "/";
  }
  &.my-medium-query {
    font-family: "/" + unquote( $med-query ) + "/";
  }
}
	<head>
	<meta class='my-small-query' />
	<meta class='my-medium-query' />
	</head>

	<div>
	</div>
	$(document).ready(function(){
	var queries = {

	small: $('.my-small-query').css('font-family').replace(/^[\/\\'"]+\|(;\s?})+\|[\/\\'"]+$/g, ''),

	medium: $('.my-medium-query').css('font-family').replace(/^[\/\\'"]+\|(;\s?})+\|[\/\\'"]+$/g, '')

	};

	console.log( queries );

	});
	@import "compass";
	$sm-query: "only screen and (max-width: 40em)";
	$med-query: "only screen and (min-width:40.063em)";

	meta {
	&.my-small-query {
	font-family: "/" + unquote( $sm-query ) + "/";
	}
	&.my-medium-query {
	font-family: "/" + unquote( $med-query ) + "/";
	}
	}