Skip to content

Instantly share code, notes, and snippets.

View chriseppstein's full-sized avatar

Chris Eppstein chriseppstein

1.5k followers · 24 following
View GitHub Profile
@chriseppstein
chriseppstein / dependency_extractor.rb
Created January 9, 2014 19:48
A ruby class for analyzing the dependencies in a sass file.
# 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 November 26, 2019 07:40
compiling a minified version of css. This configures your compass project to emit files in minified form when compiling for production. 
$ 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 July 30, 2013 16:01
Explanation of @extend with nested selectors.
%bordered {
.section & {
border: 1px solid #ccc;
}
}
.sidebar .quotation {
@extend %bordered;
}
@chriseppstein
chriseppstein / captures.scss
Last active May 7, 2018 18:09
I had this idea for how to expose general stylesheet structure data to SassScript, transform it, and then turn it back into styles.
// 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 August 13, 2012 16:12
Checkout github pull requests locally

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 = [email protected]: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 July 27, 2012 19:37
This ruby script will summarize the html5 semantic structure of a webpage so that you can more easily ensure the page is correct.
#!/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 February 29, 2012 19:29
This is code that runs using Sass 3.2 prerelease and something like this will be in compass soon.
@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 January 4, 2012 22:08
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.
$gutter: 10px;
$grid-unit: 60px;
%clearfix {
*zoom: 1;
&:after {
content: "\0020";
display: block;
height: 0;
clear: both;
@chriseppstein
chriseppstein / 0_selector_hacks.scss
Created September 14, 2011 04:27
This gist demonstrates some uses of the new sass feature: Passing content blocks to mixins.
@mixin ie6 { * html & { @content } }
#logo {
background-image: url("/images/logo.png");
@include ie6 { background-image: url("/images/logo.gif"); }
}
@chriseppstein
chriseppstein / readme.md
Created August 31, 2011 21:57 — forked from mislav/Gemfile
How to integrate Compass with Rails 3.1 asset pipeline

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