Skip to content

Instantly share code, notes, and snippets.

Chris Eppstein chriseppstein

View GitHub Profile
View sass_and_less_compared.markdown

Sass/Less Comparison

In this document I am using Sass's SCSS syntax. You can choose to use the indented syntax in sass, if you prefer it, it has no functional differences from the SCSS syntax.

For Less, I'm using the JavaScript version because this is what they suggest on the website. The ruby version may be different.

Variables

@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.

View grandparent_mixin.scss
@function up-to($list, $index) {
$l: ();
@each $e in $list {
@if length($l) < $index {
$l: append($l, $e, list-separator($list));
}
}
@return $l;
}
@chriseppstein
chriseppstein / defining_placeholders_once.scss
Created Apr 17, 2012
If you have a module with placeholder selectors, this pattern will help you avoid outputting them twice if imported twice.
View defining_placeholders_once.scss
$module-placeholders-defined: false !default;
@mixin module-placeholders {
@if not $module-placeholders-defined {
$module-placeholders-defined: true;
%module-object { color: red; }
%module-object:hover { color: blue; }
}
}
@include module-placeholders;
@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"); }
}
View README.markdown

This is a tutorial for beginning users of the macintosh terminal. Please feel free to fork this and edit/augment it. Good changes will get merged in.

@chriseppstein
chriseppstein / _mongoid_n00b_notes.markdown
Created Jan 21, 2011
some notes from a n00b learning Mongoid
View _mongoid_n00b_notes.markdown

Custom Keys

  1. I typed identity :my_attr => String instead of identity :type => String. It failed later with a strange nil error. Turns out I wanted to use key :my_attr method instead. Would have appreciated an error saying :type was missing from the hash.
  2. If you change a value related to the key, it fails silently. It even says it saved succesfully when it didn't. I would have found any of the the following behaviors reasonable as long as they were documented:
    1. Don't let me change a value used in a key at the point where I set it.
    2. Let me change a value related to a key, but don't update the _id itself
    3. Remove the old doc and make a new one and maybe assist me with renaming any references.
  3. I didn't expect parameterize_keys to default to true (or that it even exists) and it took me reading thru the code to understand what was going on. I had a field that was safe in a url but it turned my dashes into "-dash-" for no apparant reason. Once I understood it, I found
View 0_namespacing.scss
mymodule {
@at-root {
.#{&}-header { ... }
.#{&}-footer { ... }
.#{&}-body {
a { ... }
span { ... }
p { ... }
}
}
View tagged_string_example.ts
declare const EmailTag: unique symbol;
type Email = string & typeof EmailTag;
function isEmail(email: string): email is Email {
return /@/.test(email);
}
function createEmail(email: string): Email;
function createEmail(username: string, domain?: string): Email {
if (domain) {
@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;
}
}
You can’t perform that action at this time.