Pimp your style
posva

CSS Problems

body {
  font: 12px Helvetica, Arial, sans-serif;
}
a.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Minification

/*                                    wow such css such minify */
body{font:12px Helvetica,Arial,sans-serif}a.button{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}

WET

/* Same color */
.button {
  color: pink;
  /* A bunch of stuff */
}
p {
  color: pink;
  /* A bunch of stuff */
}

WET (again)

/* Same property, different values */
.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
p {
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}

WET (even more)

/* Nested properties */
.message {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.message .icon {
  color: white;
}
.message .text {
  font: 12px Helvetica, Arial, sans-serif;
}

Preprocessors

DRY (Don't Repeat yourself) Oriented

body {
  font: 12px Helvetica, Arial, sans-serif;
}
a.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Drop the Brace

body
  font: 12px Helvetica, Arial, sans-serif;
a.button
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

No more;or:

body
  font: 12px Helvetica, Arial, sans-serif
a.button
  -webkit-border-radius: 5px
  -moz-border-radius: 5px
  border-radius: 5px

Mixins

body
  font: 12px Helvetica, Arial, sans-serif
a.button
  border-radius: 5px

Variables

font-size = 14px
body
  font font-size Arial, sans-serif

Property Lookup

#logo
  position: absolute
  top: 50%
  left: 50%
  width: w = 150px
  height: h = 80px
  margin-left: -(w / 2)
  margin-top: -(h / 2)

Property Lookup

#logo
  position: absolute
  top: 50%
  left: 50%
  width: 150px
  height: 80px
  margin-left: -(@width / 2)
  margin-top: -(@height / 2)

Mixins

border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n
  
form input[type=button]
  border-radius(5px)
  
div.roundy
  border-radius 5px

Importing

@import "reset.css"
@import "utils/nib"
@import "syntax/*"

Basic stuff

Feature-rich language

Lists

values = 1 2 3 4 5 6 7 8 9 10 11 12
values = 1..12
values = 1...13

Interpolation

name = foo
.{name}
  width: 320px

Interpolation

classic-text =
  background-color: white
  color: black
p.quote
  {classic-text}

Iteration

Row 0

Row 1

Row 2

Row 3

Row 4

Row 5

Row 6

Row 7

Row 8

Iteration

.colored
  for row in 1..8
    p:nth-child({row})
      darker = row * 3
      background-color: darken(aliceblue, darker)
      color: lighten(darkorange, darker)

Simple Grid

Two
Four
Six
Eight
Nine
1
Two

Simple Grid

pad = 20px
.grid
  width: 100%
  margin: 0 0 pad 0
  [class*='column']
    float: left
    padding: (pad / 2)
  &:after
    content: ""
    display: table
    clear: both

Simple grid

v = zero one two three four five six \
  seven eight nine ten eleven twelve
columns = 12
plural(i)
  i > 1 ? 'columns' : 'column'
for i in 1..columns
  .{v[i]}-{plural(i)}
     width: (100 * i / columns)%
     display: inline-block

Simple Grid

.grid
  .one-column
    .module
      span Two
  .four-columns
    .module
      span Four

Hashes

theme-red = {
  primary: red,
  accent: blue
}

Themes with hashes

theme = theme-red
for k,v in theme
  .button-{k}
    color: v

Happy Fabulousification