// 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:
width: unit(width, px)
height: unit(height, px)
background: transparent url(image) top left no-repeat;
- for n in (1..count)
+ for n in (0...count)
&.n{n}
- y = - (@height * ( n - 1)) - h-offset
+ y = - (@height * n) - h-offset
background-position 0 y
&:hover
background-position -(@width) y
sprites(image, height, count, h-offset = 0)
height: unit(height, px)
background: transparent url(image) top left no-repeat;
- for n in (1..count)
+ for n in (0...count)
&.n{n}
- y = - (@height * ( n - 1)) - h-offset
+ y = - (@height * n) - h-offset
background-position 0 y
// Styling for a variable height element with an image background where the
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