Skip to content

Instantly share code, notes, and snippets.

View morewry's full-sized avatar
💭
⛈ 🌩 ☁️ 🌧 ☁️ ⛈ 🌧 🌩 ☁️

Rhy Moore morewry

💭
⛈ 🌩 ☁️ 🌧 ☁️ ⛈ 🌧 🌩 ☁️
View GitHub Profile
@morewry
morewry / _sprite.scss
Last active August 29, 2015 13:57
Compass sprites with placeholder (use compass icon sprites with placeholders) instead of class selectors (except the generated sprite map) and retina support
/*
# Sprite (Theme)
*/
// ---------------------------------------
// Config
$disable-magic-sprite-selectors: true;
$sprite-default-margin: 1px;
$sprite-debug: true;
// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----
// Prototypal inheritance in Sass
// Disclaimer: might be totally contrived and useless...
// “It’s not about the destination, but the journey.”
// New operator
// 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;
}
}
@morewry
morewry / _include-or-extend-defaults.scss
Last active October 1, 2015 21:07
Sass @include or @extend with generated selectors & override-able rules
// ---------------------------------------
/*
http://codepen.io/morewry/pen/meBtj
Use case for defaults:
providing interface points to override framework defaults with more flexibility and granularity than variables can reasonably provide, ie customize normalizations without editing the stylesheet directly (@content in reverse)
Use case for swapping extend or include:
@morewry
morewry / config.rb
Last active October 1, 2015 21:07
"Ad Hoc" Compass plugins config.rb, potentially useful for dealing with compass plugins through bower instead of as gems. Set up a plugin similarly to https://github.com/Team-Sass/Compass-Extension-Template
# make ad hoc compass frameworks behave (show up in list, be import-able like normal)
# custom vars
thisplugin_dir = (yours)
# compass config
extensions_dir = (yours)
extensions_path = project_path + extensions_dir
additional_import_paths = [extensions_dir, extensions_dir + thisplugin_dir + 'stylesheets']
@morewry
morewry / respond-to.scss
Last active October 1, 2015 21:07
Sass mixin for nicknamed, comma-separated "or" media queries
/*
# Responsive Design Utilties
A few Sass functions and mixins helpful for responsive designs including a function to convert between CSS measurement units and a respond-to media query mixin that supports comma-separated "or" queries.
*/
// ---------------------------------------
// ---------------------------------------
/*
@morewry
morewry / sass-extend-or-include-wish
Created April 3, 2014 03:23
Something I wish I could do in Sass
// ---------------------------------------
/*
## Set / Get
http://cdpn.io/hgLal
*/
// ---------------------------------------
@morewry
morewry / _convert-units.scss
Created May 26, 2014 22:18
Sass convert length units
/*
# Convert Units (function)
TODO: Description
*/
// ---------------------------------------
@function convert-units ( $length, $as: rem, $root: 16, $ppi: 96 ) {
$unit: unit($length);
@morewry
morewry / compass-config-with-styledocco.rb
Created November 26, 2012 20:33
Compass config with styledocco to generate styleguide on compile
# we have a separate build process that strips comments & minifies, so I use production mode here to generate the styleguide
project_path = File.dirname(__FILE__) + "/"
utils_dir = "utilities/"
utils_path = project_path + utils_dir
output_style = (compiletype == :production) ? :expanded : :nested
# callback - on_stylesheet_saved
on_stylesheet_saved do |filename|
if File.exists?(filename)
if (compiletype == :production)
@morewry
morewry / PngOutBatch.cmd
Created November 26, 2012 20:25 — forked from nicjansma/PngOutBatch.cmd
Runs a PNG through PngOut multiple times at different block sizes. More details @ http://nicj.net/2012/05/15/pngoutbatch
@echo off
setlocal enabledelayedexpansion
REM
REM PngOutBatch
REM
REM Nic Jansma - nic@nicj.net
REM
REM Runs a PNG through PngOut multiple times at different block sizes. Shows the
REM file-size savings during and at the end.