Ruby > 1.8 : sudo apt-get install ruby
Ruby gems : sudo apt-get install rubygems
Compass : sudo gem install compass
Link compass binary: sudo ln -s /var/lib/gems/1.8/bin/compass/usr/local/bin/compass
or edit COMPASS_BINARY and replace with absolute rute
http://sass-lang.com/tutorial.html
<div class="test span-10 last append-1"> </div>
igual que...
<div class="test"> </div>
#test
+column(10, true) //el true indica 'last' para blueprint
+append(1)
Utilizar +container
si se desea utilizar contenedores (el layout está terminado, no se debería utilizar más containers)
Utilizar background: image-url('imagen.png')
(http://compass-style.org/reference/compass/helpers/urls) y guardar los nuevos statics en path/static/img
Por ejemplo, para el layout me cree la carpeta /static/compass/layout
con _header.sass, _footer.sass y _navigation.sass y dentro de static/compass/screen.sass
realizo los imports:
@import layout/header
@import layout/navigation
@import layout/footer
De esta manera según vayamos maquetando creamos diferentes carpetas con partials dentro: blog, webadmin etc etc y generamos css más estructurado para nosotros y un solo css para el navegador.
Si hay algo que quieras hacer en IE utilizar las clases ie6, ie7, ie8
// Chrome
li
&:after
content: 'modern browser'
// IE 6 y 7
.ie6, .ie7
li
border-right: 1px solid red
Utilizar la function font_size($font_que_quieres, $font_del_contendor)
para obtener una fuente real del tamaño que deseas. De manera que si la fuente cambia de tamaño quede proporcional (rythm)
La mayoría de las veces con font-size: font_size(15px)
será suficiente pues cogerá el tamaño del container, el cual debería ser el body
Esto es así porque si se hace un nesting con font-size
en cada nivel de profundidad la fuente va empequeñeciéndose cada vez más (incluso utilizando pixels)