jnowland

// Currently an idea, yet to test this snippet.

@mixin logo( $logo-name) {

	$image: "#{$logo-name}.png";

	.logo {
		background-repeat:no-repeat;
		display:block;
		overflow:hidden;

jnowland

#environment = :production
environment = :development

# Set this to the root of your project when deployed.
# Work from file directory "code" for your statics, when the css is ready to go into the wordpress theme switch it over to development

if environment == :production
	output_style = :expanded
	http_path = "/"
	css_dir = "deploy"

jnowland

//Please note this does not currently work.

@each $section in council, household, business {

  .#{$section} h2 {

    //Step 1: I want this below varible to dynamically change to $council-light, $household-light, $business-light
    color: $#{$section}-light; //this seems to be the problem of trying to append '-light' onto a varible name
    //please note council-light, household-light, business-light are all predefined varibles with hex colours assigned.

jnowland

/* ==========================================================================
  Media Queries:
 
  How to get inline media querey
 
  Order from small to big.
  extra-small, small, medium, large, larger, huge, massive.

  Should be noted when using min-width your styles outside any mediaqueries are the smallest and global.
 

jnowland

* {
    background: pink;
    font-family: cursive;
    text-transform: uppercase;
    letter-spacing: -5px;
}

*:hover {
    /*webkit rainbow gradient*/
    background-image: -webkit-gradient(linear,  left top,  left bottom, 

jnowland

<snippet>
  <content><![CDATA[
@include breakpoint(${1:massive / huge / larger / large / medium / small / extra-small}) {
    ${2:}
}

]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>mq</tabTrigger> 
	<!-- Optional: Set a scope to limit where the snippet will trigger -->

jnowland

$padding: 20px;
$total-width:580px;

textarea {
    	width:100% - (percentage($padding / total-width)*2);
			padding:0 percentage($padding / total-width);
}

jnowland

<snippet>
  <content><![CDATA[
@include breakpoint(${1:papa-bear / mama-bear / baby-bear}) {
    ${2:}
}
 
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>mq</tabTrigger> 
	<!-- Optional: Set a scope to limit where the snippet will trigger -->

jnowland

<snippet>
  <content><![CDATA[

<img src="http://lorempixel.com/${1:}/${2:}/${3:abstract / animals / business / cats / city / food / nightlife / fashion / people / nature / sports / technics / transport}/${4:Enter a Number 1 / 10}/" width="${1:}" height="${2:}" />
 
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>lorempic</tabTrigger> 
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<!-- <scope>source.python</scope> -->

jnowland

<snippet>
  <content><![CDATA[@extend .clearfix;]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>cf</tabTrigger> 
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<!-- <scope>source.python</scope> -->
</snippet>