_px(i)
unit(i) == '' ? unit(i, px) : i
-
-vendors = webkit moz o ms official
-
+// transparently support vender-specific tags
border-radius()
- for vendor in vendors
- if vendor == official
- border-radius: arguments
- else
- -{vendor}-border-radius: arguments
-// FIXME add box shadow and text shadow?
+ -webkit-border-radius: arguments
+ border-radius: arguments
+box-shadow()
+ -webkit-box-shadow: arguments
+ box-shadow: arguments
+box-sizing()
+ -webkit-box-sizing: arguments
+ -moz-box-sizing: arguments
+ box-sizing: arguments
+user-select()
+ -webkit-user-select: arguments
+ -moz-user-select: arguments
+ -ms-user-select: arguments
+ user-select: arguments
+
+// map "whitespace:" to "white-space:"
+whitespace()
+ white-space: arguments
// helper function
_pos(type, args)
// you can pass directions and units, or just directions. Examples:
// absolute: top 20px left 0
// fixed: top right
-// relative: top: -4px
+// relative: top -4px
absolute()
_pos('absolute', arguments)
fixed()
relative()
_pos('relative', arguments)
+// Specify width and height on the same line
+dimensions(w, h)
+ width: _px(w)
+ height: _px(h)
+
// Make children of this element inline-blocks that are spaced evenly accross.
//
// To create a minimum distance between: don't use word-spacing, it's broken in
// firefox. Instead, try padding on the children and negative margin on the
// parent.
-space_evenly(line_height = 1.2em)
+space-evenly(line_height = 1.2em)
text-align justify
& > *
display inline-block
// html:
// <nav>
// <ul>
-// <li class="n1">home</li>
-// <li class="n2">contact</li>
+// <li class="n0">home</li>
+// <li class="n1">contact</li>
// </ul>
// </nav>
// styl:
// nav li
// sprite-rollover "images/nav.png" 150 35 2
-sprite-rollover(image, width, height, count)
- width = unit(width, px)
- height = unit(width, px)
- width width
- height height
- background: transparent url(image) top left no-repeat;
- for n in (1..count)
+sprites-rollover(image, width, height, count, h-offset = 0)
+ width: unit(width, px)
+ height: unit(height, px)
+ background-image: url(image)
+ background-position: top left
+ background-repeat: no-repeat;
+ for n in (0...count)
&.n{n}
- y = (2px - n * 35px)
+ y = - (@height * n) - h-offset
background-position 0 y
&:hover
- background-position -(width) y
+ background-position -(@width) y
+// see sprites-rollover
+sprites(image, height, count, h-offset = 0)
+ height: unit(height, px)
+ background-image: url(image)
+ background-position: top left
+ background-repeat: no-repeat;
+ for n in (0...count)
+ &.n{n}
+ y = - (@height * n) - h-offset
+ background-position 0 y
// Styling for a variable height element with an image background where the
// middle repeats vertically. You must split your image into three images, and
margin 0
padding 0
list-style none
+
+// Example:
+// input
+// +placeholder()
+// color: red
+placeholder()
+ &::-webkit-input-placeholder
+ {block}
+ &:-moz-placeholder // firefox 4-18
+ {block}
+ &::-moz-placeholder // firefox 19+
+ {block}
+ &:-ms-input-placeholder // ie
+ {block}
+
+// Example:
+// div.button
+// noselect()
+noselect()
+ -webkit-touch-callout: none
+ -webkit-user-select: none
+ -khtml-user-select: none
+ -moz-user-select: none
+ -ms-user-select: none
+ user-select: none