Skip to content

Instantly share code, notes, and snippets.

Chris Eppstein chriseppstein

View GitHub Profile
@chriseppstein
chriseppstein / dependency_extractor.rb
Created Jan 9, 2014
A ruby class for analyzing the dependencies in a sass file.
View dependency_extractor.rb
# extracts dependencies for a file
class DependencyExtractor
class Asset < Struct.new(:filename, :importer, :children)
def initialize(*args)
super
self.children ||= []
end
# transitive dependencies. Call `children` for just the immediate dependencies.
def dependencies
@chriseppstein
chriseppstein / _minified_filenaming.md
Last active Dec 31, 2015
compiling a minified version of css. This configures your compass project to emit files in minified form when compiling for production.
View _minified_filenaming.md
$ compass compile --environment production && compass compile

Afterwards you will have both the minified and non-minified versions in your output folder. Note that compass clean will not clean up your minified files.

@chriseppstein
chriseppstein / input.scss
Created Jul 30, 2013
Explanation of @extend with nested selectors.
View input.scss
%bordered {
.section & {
border: 1px solid #ccc;
}
}
.sidebar .quotation {
@extend %bordered;
}
@chriseppstein
chriseppstein / captures.scss
Last active May 7, 2018
I had this idea for how to expose general stylesheet structure data to SassScript, transform it, and then turn it back into styles.
View captures.scss
// A named buffer. Will append to existing content captured there.
// The buffer can be accessed via get-capture("foo") or @emit "foo".
@capture "foo" {
@media screen {
.asdf {
.qwerty {
/* This is a comment */
color: red;
}
}
@piscisaureus
piscisaureus / pr.md
Created Aug 13, 2012
Checkout github pull requests locally
View pr.md

Locate the section for your github remote in the .git/config file. It looks like this:

[remote "origin"]
	fetch = +refs/heads/*:refs/remotes/origin/*
	url = git@github.com:joyent/node.git

Now add the line fetch = +refs/pull/*/head:refs/remotes/origin/pr/* to this section. Obviously, change the github url to match your project's URL. It ends up looking like this:

@chriseppstein
chriseppstein / semantic_summary.rb
Created Jul 27, 2012
This ruby script will summarize the html5 semantic structure of a webpage so that you can more easily ensure the page is correct.
View semantic_summary.rb
#!/usr/bin/env ruby
require 'rubygems'
require 'nokogiri'
require 'open-uri'
url = ARGV[0]
class Document < Nokogiri::XML::SAX::Document
SEMANTIC_CONTAINERS = %w(body article section nav aside hgroup header footer)
COUNT_ELEMENTS = %w(p a)
@chriseppstein
chriseppstein / 0_usage.scss
Created Feb 29, 2012
This is code that runs using Sass 3.2 prerelease and something like this will be in compass soon.
View 0_usage.scss
@include keyframes(appear-and-roundify) {
0% { opacity: 0; @include border-radius(2px); }
100% { opacity: 1; @include border-radius(10px); }
}
@chriseppstein
chriseppstein / 0_silent_selector_grid.scss
Created Jan 4, 2012
This gist describes a new feature we're experimenting with for Sass 3.2: placeholder selectors. They do not get generated into your output, but they can be used like a class and extended like one.
View 0_silent_selector_grid.scss
$gutter: 10px;
$grid-unit: 60px;
%clearfix {
*zoom: 1;
&:after {
content: "\0020";
display: block;
height: 0;
clear: both;
@chriseppstein
chriseppstein / 0_selector_hacks.scss
Created Sep 14, 2011
This gist demonstrates some uses of the new sass feature: Passing content blocks to mixins.
View 0_selector_hacks.scss
@mixin ie6 { * html & { @content } }
#logo {
background-image: url("/images/logo.png");
@include ie6 { background-image: url("/images/logo.gif"); }
}
@chriseppstein
chriseppstein / readme.md
Created Aug 31, 2011 — forked from mislav/Gemfile
How to integrate Compass with Rails 3.1 asset pipeline
View readme.md

This gist is no longer valid. Please see Compass-Rails for instructions on how to install.

You can’t perform that action at this time.