Skip to content

Instantly share code, notes, and snippets.

# Code below generates this error
# undefined method `value' for "members/fenwick1.gif":String
# for line ih = ...
module ApplicationHelper
def member_image_link(member)
return if member.logo.blank?
ih = image_height(Sass::Script::String.new(member.m_logo))
ihv = ih.length-2
@mixin some_sprite($state) {
background-image: url(...);
background-position: if($state is hover, 18px, 0px) 18px;
}
// somewhere down the line ..........
.thingy {
@include some_sprite(default);
}
// Proposed syntax: !remaining applied to the last positional argument becomes a
// comma list of any unbound positional arguments.
@mixin multi-shadow($shadows !remaining){
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
-o-box-shadow: $shadows;
box-shadow: $shadows;
}
#content
.row
.third
.third
.third.last
.row
.half
.half.last
.row
.fourth
@function values($values...) {
@return {
@for $value in $values {
#{$value}
}
}
}
@import 'blueprint/grid'
//
requires compass gem
usage: compass compile path/to/grid.sass -e production --output-style nested
//
defines Blueprint grid variables
$blueprint-grid-columns: 24
$blueprint-grid-width: 30px
$blueprint-grid-margin: 10px

Often in user interface design, there are cases where an element should have all of the properties of another element, and then possibly some unique properties unto itself.

The common approach to dealing with this has been to adjust the markup of a document such that the element has the qualities of both elements.

For instance, imagine if we have a design for a normal error and also for a serious error. We might write our markup like so:

// works
=general_text_color
color: #ccc
p
+general_text_color
// doesn't work
!general_text_color = #ccc
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0068)http://24ways.org/examples/compose-to-a-vertical-rhythm/example.html -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>Compose a Vertical Rhythm example</TITLE>
<LINK rel="stylesheet" type="text/css" href="sassy.css" title="sassy">
<LINK rel="alternate stylesheet" type="text/css" href="original.css" title="original">
</HEAD><BODY>
<H1>Aboard Minerva off the Coast of New England</H1>