Skip to content

Instantly share code, notes, and snippets.

View jasonkmccoy's full-sized avatar

Jason McCoy jasonkmccoy

5 followers · 20 following
View GitHub Profile
@jasonkmccoy
jasonkmccoy / sass-simple-mixin.css
Last active August 29, 2015 14:15
Simple Mixin Example (Sass Bites Podcast #2)
/* CSS Output */
/* Example 1 */
div {
display: inline-block;
width: 200px;
height: 200px;
}
@jasonkmccoy
jasonkmccoy / template.html
Last active August 29, 2015 14:15
Starting HTML5 Document Template
<!doctype html>
<!--[if lt IE 7]><html class="no-js ie6"><![endif]-->
<!--[if IE 7]><html class="no-js ie7"><![endif]-->
<!--[if IE 8]><html class="no-js ie8"><![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
@jasonkmccoy
jasonkmccoy / sass-simple-extends.css
Last active August 29, 2015 14:15
Simple Extends Example (Sass Bites Podcast #3)
/* CSS Output */
/* General styles */
div {
display: inline-block;
width: 200px;
height: 200px;
}
h2 {
@jasonkmccoy
jasonkmccoy / sass-advanced-extends.css
Last active August 29, 2015 14:15
Advanced Extends (Sass Bites Podcast #4)
/* CSS Output */
/* General styles */
div {
display: inline-block;
width: 200px;
height: 200px;
}
h2 {
@jasonkmccoy
jasonkmccoy / [email protected]
Last active August 29, 2015 14:15
The @if directive (Sass Bites Podcast #5)
/* CSS Output */
/* General div styles */
div {
display: inline-block;
padding: 20px;
text-align: center;
width: 200px;
height: 200px;
}
@jasonkmccoy
jasonkmccoy / [email protected]
Last active August 29, 2015 14:15
The @each directive with Chris Bloom (Sass Bites Podcast #6)
/* CSS Output */
@charset "UTF-8";
div {
display: inline-block;
padding: 20px;
text-align: center;
width: 200px;
height: 200px;
}
@jasonkmccoy
jasonkmccoy / [email protected]
Last active August 29, 2015 14:15
Dale Sande's @each gist for dealing with sprites
/* CSS Output */
.the-icons a, .new-ico-block a {
display: inline-block;
width: 0.875em;
height: 0.875em;
line-height: 0.875em;
background: url("/images/social-media-icons.png") 0 0 no-repeat; }
.sassmeister a {
background-position: 0em 0em; }
@jasonkmccoy
jasonkmccoy / [email protected]
Last active August 29, 2015 14:15
The @while directive (Sass Bites Podcast #7)
/* CSS Output */
h1, h2, h3, h4, h5, h6 {
display: inline;
padding: 5px;
}
h1 {
color: orange;
}
@jasonkmccoy
jasonkmccoy / [email protected]
Last active August 29, 2015 14:15
The @for directive (Sass Bites Podcast #8)
/* CSS Output */
h1, h2, h3, h4, h5, h6 {
display: inline;
}
/* Example 1: simple @for example */
h1 {
font-size: 1em;
padding: 20px;
}
@jasonkmccoy
jasonkmccoy / sass-nesting.css
Last active August 29, 2015 14:15
Sass Nesting: Sass Bites Podcast #9
/* CSS Output */
ul {
list-style: none;
font-size: 16px;
line-height: 1.6;
}
a {
text-decoration: none;
color: pink;