VimGolf - real Vim ninjas count every keystroke!

CSS to SASS

Convert from css to sass.

Start file

.navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}
.navigation .logo {
  float: left;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}

End file

$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)
  .logo
    float: left

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue
  font:
    family: serif
    weight: bold
    size: 1.2em

View Diff

1,7c1,2
< .navigation {
<   border-color: #3bbfce;
<   color: #2b9eab;
< }
< .navigation .logo {
<   float: left;
< }
---
> $blue: #3bbfce
> $margin: 16px
9,16c4,17
< .border {
<   padding: 8px;
<   margin: 8px;
<   border-color: #3bbfce;
<   font-family: serif;
<   font-weight: bold;
<   font-size: 1.2em;
< }
---
> .content-navigation
>   border-color: $blue
>   color: darken($blue, 9%)
>   .logo
>     float: left
> 
> .border
>   padding: $margin / 2
>   margin: $margin / 2
>   border-color: $blue
>   font:
>     family: serif
>     weight: bold
>     size: 1.2em

Solutions

The best way to learn is to practice. Below, you will find some of the solutions other golfers have entered. To unlock higher ranked solutions, submit your own entry which does as well or better than the solutions you can currently see - climb the ladder!

Check out these helpful resources to improve your Vim skills... Game on.

Unlock 35 remaining solutions by signing in and submitting your own entry

#36 Aleksey Gureiev / @spyromus - Score: 188 - 12/07/11 @ 12:46

:g/;/d<CR>uggVG:s/;//g<CR><C-V>kkwc  <C-O>Ofn<BS>ont:<Esc>kf#"ccW$blue<Esc>B"ayWkBcw$margin / 2<Esc>kB.ggO<C-R>a: <C-R>c<Esc><Esc>j0acontent-<Esc>f DjBcw<Esc>lce<C-R>a<Esc>jBcWdarken(<C-R>a, 9%)<Esc>jd2wu2<Esc><BS><Right><Down>d2Wf DBi  <Esc>j.jddggo$margin: 16px<CR><Esc>:10<CR>f DGdd:wq<CR>

0 comments

#37 Forrest L Norvell / @othiym23 - Score: 201 - 01/28/12 @ 21:07

VG:s/;//<CR>ggO$blue: #3bbfce<CR>$margin: 16px<CR><Esc>jelDbicontent-<Esc>VG:s/#3bbfce/$blue/<CR>:7<CR>dd2dwi  <Esc>ji  <Esc>kA<BS><BS><Esc>2jddjA<BS><BS><Esc>jVj:s/8px/m<BS>$margin / 2/<BS><BS><BS><BS>\/ 2/<CR>jjkofont:<Esc>jVjj:s/font-/  /<CR>jdd:6<CR>eeeCdarken($blue, 9%)<Esc>:wq<CR>

0 comments

#38 Dan Masquelier / @danmasq - Score: 205 - 07/01/11 @ 08:38

acontent-<Esc>O$blue: #3<C-N><Esc>qv/#3<CR>2cw$bl<C-N><Esc>q@v:%s/;//g<CR>:%s/ {//g<CR>:%s/}//g<CR>dddtskdf-kf-xi<CR><Esc>qvi  <Esc>jq2@vx^i  <Esc>llx:<Esc><Esc>3kA;<BS>:<Esc>:%s/8px/$ma<C-N>rgin/g<BS><BS> \/ 2/g<CR>3kdd3kdt i <Esc>kddji  <Esc>2kf#2cwdarken($bl<C-N>, 9%)<Esc>Ho$ma<C-N>: 16pxo<BS><Esc>0o<Esc>ZZ

0 comments

#39 Joost / @vlabakje - Score: 206 - 02/12/11 @ 10:39

i$blue: #3bbfce<CR>$margin: 16px<CR><CR>.content-<Esc>lx$xxjhhC$blue<Esc>j7hCdarken($blue, 9%)<CR>.logo<CR>  float: left<CR><Esc>3ekk3d<CR>ddj$xxjwwC$margin / 2<Esc>3w.4wllcGborder-color: $blue<CR>font:<CR>  family: serif<CR>weight: bold<CR>size: 1.2em<Esc>ZZ

0 comments

#40 Neal Lindsay / @neall - Score: 222 - 03/16/11 @ 08:19

jyyGggP<Home>ct#$blue: <Esc>yyplciwmargin<Esc>f#DA16px<Esc>k<End>Djo<Esc>je<Esc>u<C-R>jj<Home>acontent-<Esc><End>hDjhhDabl<BS><BS>$blue<Esc>jbhDAdarnek<BS><BS><BS>ken($blue, 9%)<Esc>jdddf <Esc>>>ui  <Esc><End><Left>Dj<End>D<Home>i  <Esc>jddj<End>hDjeeebDa$margin / 2<Esc>j.bbbbdf;jf#c$$blue3<BS><Esc>Gddcf-  <Esc>jkb.kb.kA<CR>font:<Esc>j<End>DjDjD:wq<CR>

0 comments

#41 dm4 / @dm4 - Score: 226 - 02/13/11 @ 05:08

acontent-<C-E><BS><Esc>A<BS><BS><Esc>jhhi#<BS>$blue<Esc>lvllllllxkO<C-R>0<Esc>pjjjA<BS><BS><BS><BS><BS><BS><BS><BS>darken($blue, 9%)<Esc>kxkk0i$blue: <Esc>o#ma<BS><BS><BS>$margin: 16px<CR><Esc>jjjo.logo<CR>  float: left<CR><Esc>jVjjjjdA<BS><BS><Esc>jllll<C-V>jlllls $margin / 2<Esc>j4F xjA<BS><BS><BS><BS><BS><BS><BS><BS>$blue<Esc>j^<C-V>lllljjs  <Esc>kofont:<Esc>jA<BS><Down><BS><Down><BS><Down><BS><BS><Esc>:x<CR>

0 comments

#42 Michael Søndergaard / @Sheeo - Score: 237 - 02/13/11 @ 14:55

O$blue: #3bbfce<CR>$margin: 16px<CR><Esc>jacontent-<Esc>$hd$hjbc$blue<Esc>bi$<Esc>jbhc$darken($blue, 9&<BS>%)<Esc>jxjdwdwi<Tab><BS>  <Esc>kddjk$xa<BS><Esc>jjddk$hhhhhhhhhhhi<Tab><BS>  <Esc>$xjjhd$jeeebd$a$margin /2<BS> <Esc>a2<Esc>jbd$a$margin / 2<Esc>jbbc$$blue<Esc>jbbbi<BS>:<CR>  <Esc>$xjbbbbbdwxi  <Esc>$xj0cts    <Esc>$xjdd:wq<CR>

0 comments

#43 Niko Riitala / @nikoriitala - Score: 275 - 02/08/11 @ 02:29

VGd:set paste<CR>i$blue: #3bbfce<CR>$margin: 16px<CR><CR>.content-navigation<CR>  border-color: $blue<CR>  color: darken($blue, 9%)<CR>  .logo<CR>    float: left<CR><CR>.border<CR>  padding: $margin / 2<CR>  margin: $margin / 2<CR>  border-color: $blue<CR>  font:<CR>    family: serif<CR>    weight: bold<CR>    size: 1.2em<Esc>ZZ

@0x89: +1 for making fun of Tharnakus's solution

1 comment

#44 Tharnakus / @Tharnakus - Score: 301 - 02/08/11 @ 02:39

:%s/;<CR>df-<Up>.<Up>.<Up>o<BS>.font:<Up><Up><Down><Right><Right><Right><Right><Right><Right><Right><Right><Right><Esc><Right>xcw$blue<Esc><Up><Left><Left>cw$margin / 2<Esc><Up><Left><Left>.<Up><Left>D<Down><Down><Down><Down><Down><Down><Down><Down><Down>dd<Up><Up><Up><Up><Up><Up><Up><Up><Up><Down><Up>dd<Up><Up>xcwx<BS><Del><Right><Right><Right><Right><Right><Esc><Right>D<Left><Left><Left><Left>i <Down><Up><Left><Left><Right> <Down>  <Down><Down><Down><Left><Left><Left><Left><Down><Down><Down><Right> <Down>  <Down><Left><Left>  <Down><Left><Left>  <Up><Up><Up><Up><Up><Up><Up><Up><Up><Up><Up><Esc>dd<Up><Up><Up><Left><Left><Right>icontent-<Right><Right><Right><Right><Right><Right><Right><Right><Right><Right>D<Left><Esc><Right>D<Down><Left><Left>xcw$blue<Down><BS><BS><BS><BS><BS><BS><BS>darken($blue, 9%)<Down><Left><Down><Down><Down><Down><Down><Down><Left><Left><Down><Left><Left>x<BS><Del><Down><Right><Up><Up><Up><Up><Up><Up><Up><Up><Up><Up><Up><Up><Up><Up><Up><Left><Left><Left><CR><Up>$blue: #3bbfce<CR>$margin: 16px<CR><Esc>:wq<CR>