SELECTOR
|
1 2 |
body color #fff |
|
1 2 3 |
textarea input border 1px solid #eee |
|
1 2 3 4 |
foo bar baz, form input, > a border 1px solid |
|
1 2 3 4 5 |
textarea input color #A7A7A7 &:hover color #000 |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
box-shadow() -webkit-box-shadow arguments -moz-box-shadow arguments box-shadow arguments html.ie8 &, html.ie7 &, html.ie6 & border 2px solid arguments[length(arguments) - 1] body #login box-shadow 1px 1px 3px #eee |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.foo &__bar width: 10px ^[0]:hover & width: 20px =============== .foo__bar { width: 10px; } .foo:hover .foo__bar { width: 20px; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.foo &__bar &_baz width: 10px ^[-1]:hover & width: 20px ================= .foo__bar_baz { width: 10px; } .foo__bar:hover .foo__bar_baz { width: 20px; } |
|
1 2 3 4 5 6 7 |
{selector('.a', '.b', '.c, .d')} color: red ================== .a .b .c, .a .b .d { color: #f00; } |
|
1 2 3 4 5 6 7 8 9 |
pad(n) margin (- n) body pad(5px) =================== body { margin: -5px; } |
VARIABLES
|
1 2 3 4 |
$font-size = 14px font = $font-size "Lucida Grande", Arial body font font, sans-serif |
|
1 2 3 4 5 6 7 8 |
#logo position: absolute top: 50% left: 50% width: 150px height: 80px margin-left: -(@width / 2) margin-top: -(@height / 2) |
|
1 2 3 4 5 6 7 8 9 10 |
position() position: arguments z-index: 1 unless @z-index #logo z-index: 20 position: absolute #logo2 position: absolute |
INTERPOLATION
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
vendor(prop, args) -webkit-{prop} args -moz-{prop} args {prop} args border-radius() vendor('border-radius', arguments) box-shadow() vendor('box-shadow', arguments) button border-radius 1px 2px / 3px 4px ==================== button { -webkit-border-radius: 1px 2px / 3px 4px; -moz-border-radius: 1px 2px / 3px 4px; border-radius: 1px 2px / 3px 4px; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
table for row in 1 2 3 4 5 tr:nth-child({row}) height: 10px * row =============== table tr:nth-child(1) { height: 10px; } table tr:nth-child(2) { height: 20px; } table tr:nth-child(3) { height: 30px; } table tr:nth-child(4) { height: 40px; } table tr:nth-child(5) { height: 50px; } |
|
1 2 3 4 |
mySelectors = '#foo,#bar,.baz' {mySelectors} background: #000 |
OPERATORS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
. [] ! ~ + - is defined ** * / % + - ... .. <= >= < > in == is != is not isnt is a && and || or ?: = := ?= += -= *= /= %= not if unless |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
!0 // => true !!0 // => false !1 // => false !!5px // => true -5px // => -5px --5px // => 5px not true // => false not not true // => true |
|
1 2 3 4 5 6 |
a = 0 b = 1 !a and !b // => false // parsed as: (!a) and (!b) |
|
1 2 3 4 5 6 |
list = 1 2 3 list[0] // => 1 list[-1] // => 3 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
add(a, b) if a is a 'unit' and b is a 'unit' a + b else (error 'a and b must be units!') body padding add(1,'5') // => padding: error "a and b must be units"; padding add(1,'5')[0] // => padding: error; padding add(1,'5')[0] == error // => padding: true; padding add(1,'5')[1] // => padding: "a and b must be units"; |
|
1 2 3 4 5 6 7 8 |
1..5 // => 1 2 3 4 5 1...5 // => 1 2 3 4 5..1 // => 5 4 3 2 1 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
15px - 5px // => 10px 5 - 2 // => 3 5in - 50mm // => 3.031in 5s - 1000ms // => 4s 20mm + 4in // => 121.6mm "foo " + "bar" // => "foo bar" "num " + 15 // => "num 15" |
|
1 2 3 4 5 6 7 8 9 10 11 |
2000ms + (1s * 2) // => 4000ms 5s / 2 // => 2.5s 4 % 2 // => 0 2 ** 8 // => 256 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
5 == 5 // => true 10 > 5 // => true #fff == #fff // => true true == false // => false wahoo == yay // => false wahoo == wahoo // => true "test" == "test" // => true true is true // => true 'hey' is not 'bye' // => true 'hey' isnt 'bye' // => true (foo bar) == (foo bar) // => true (1 2 3) == (1 2 3) // => true (1 2 3) == (1 1 3) // => false |
|
1 2 3 4 5 6 7 8 9 10 11 |
5 && 3 // => 3 0 || 5 // => 5 0 && 5 // => 0 #fff is a 'rgba' and 15 is a 'unit' // => true |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
nums = 1 2 3 1 in nums // => true 5 in nums // => false vals = (error 'one') (error 'two') error in vals // => false (error 'one') in vals // => true (error 'two') in vals // => true (error 'something') in vals // => false |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
pad(types = padding, n = 5px) if padding in types padding n if margin in types margin n body pad() body pad(margin) body pad(padding margin, 10px) ================ body { padding: 5px; } body { margin: 5px; } body { padding: 10px; margin: 10px; } |
MIXINS
|
1 2 3 4 5 6 7 |
border-radius(n) -webkit-border-radius n -moz-border-radius n border-radius n form input[type=button] border-radius(5px) |
FUNCTION
|
1 2 3 4 5 6 7 8 9 |
add(a, b) a+b ============== body padding add(10px,5) ============== body{ padding: 15px; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
add(a, b) a + b sub(a, b) a - b invoke(a, b, fn) fn(a, b) body padding invoke(5, 10, add) padding invoke(5, 10, sub) ================ body { padding: 15; padding: -5; } |
KEYWORD ARGUMENTS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
body { color: rgba(255, 200, 100, 0.5); color: rgba(red: 255, green: 200, blue: 100, alpha: 0.5); color: rgba(alpha: 0.5, blue: 100, red: 255, 200); color: rgba(alpha: 0.5, blue: 100, 255, 200); } ================== body { color: rgba(255,200,100,0.5); color: rgba(255,200,100,0.5); color: rgba(255,200,100,0.5); color: rgba(255,200,100,0.5); } |
|
1 2 3 |
p(rgba) ================== inspect: rgba(red, green, blue, alpha) |
BUILT-IN FUNCTIONS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
red(#c00) // => 204 red(#000, 255) // => #f00 green(#0c0) // => 204 green(#000, 255) // => #0f0 blue(#00c) // => 204 blue(#000, 255) // => #00f alpha(#fff) // => 1 alpha(rgba(0,0,0,0.3)) // => 0.3 alpha(#fff, 0.5) // => rgba(255,255,255,0.5) dark(black) // => true dark(#005716) // => true dark(white) // => false light(black) // => false light(white) // => true light(#00FF40) // => true hue(hsl(50deg, 100%, 80%)) // => 50deg hue(#00c, 90deg) // => #6c0 |