Maquetando css3 como un Samurai con Compass y Sass

No Comments
Ando conociendo y aprendiendo de estas excelentes  herramientas que nos permiten trabajar con CSS, las cuales son compass y sass, llevaremos unos cuantas entradas en el blog hablando de los mismos que son y viendo algunos ejemplos de trabajo con ellos en esta entrada explicare un poco de ambos que son que nos permiten hacer mas la respectiva instalación en Debian 6 que es la distribución con la que trabajo, cabe destacar que cada entrada tendrá una relación directa con alguna arma mortal ninja para convertirnos en Samurai :).



¿Que es Sass y Compass?

Cuando trabajamos con CSS quisieramos que el uso de variables nos permita hacer un trabajo mas ligero y rapido, o aun mejor poder trabajar anidando y sin repetir millares de linea de codigo, para todo esto aparece Sass (Syntactically Awesome Stylesheets)porque no es posible hacer todas estas cosas directamente en el css. Con ella podemos escribir y generar css de alta calidad rápidamente, porque es multilenguaje y permite trabajar directamente y rapidamente con los css, en su pagina oficial podemos ir viendo algunos ejemplos.

Ahora que es Compass, es el que ayudar a marcar un ritmo daa ya va enserio :) sin bromas es una extension de Sass que nos permite trabajar mejor con el, ahora si procedemos con la instalación en Ubuntu se procede de la siguiente manera, ya que lo realize en una virtual  por andar macaneando hasta encontrar una salida para Debian.

Instalación en Ubuntu

Primero instalamos ruby mas las gemas, y por ultimo compass.

snifer@Snifer:/$ sudo aptitude install ruby-full
snifer@Snifer:/$ sudo apt-get install rubygems1.8

Al instalar compass nos debe de dar la siguiente salida

snifer@Snifer:/$ gem install compass
Successfully installed sass-3.1.19
Successfully installed chunky_png-1.2.5
Successfully installed fssm-0.2.9
Successfully installed compass-0.12.1
4 gems installed
Installing ri documentation for sass-3.1.19...
Installing ri documentation for chunky_png-1.2.5...
Installing ri documentation for fssm-0.2.9...
Installing ri documentation for compass-0.12.1...
Installing RDoc documentation for sass-3.1.19...
Installing RDoc documentation for chunky_png-1.2.5...
Installing RDoc documentation for fssm-0.2.9...
Installing RDoc documentation for compass-0.12.1...

Y listo tenemos instalado Compass y Sass nuestras dos Katanas para ser un Samurai.

Instalación en Debian Squeeze



Ahora si entramos en modo Samurai e ir a pelear contra el malvado  rompe juguetes, activando los repositorios de Debian Sid (unstable) para acceder a los paquetes que necesitamos, sin necesidad de que muera nuestro sistema.



# Testing  :'( solo para casos extremos snifer
deb http://ftp.de.debian.org/debian sid main 

Y procedemos con la instalación.


snifer@Snifer:/$ sudo aptitude install ruby-full
snifer@Snifer:/$ sudo apt-get install rubygems1.8



sudo apt-get install libhaml-ruby
sudo apt-get install ruby-compass
sudo apt-get install ruby-sass
sudo apt-get install rubygems
gem install haml


Y listo tenemos instalado correctamente, para evitar alguna metida de pata, eliminamos el repositorio unstable ;).

Primeros pasos con Compass y Sass


Ya que el dia de hoy aprendemos a usar Tanto en nuestro proceso para convertirnos en Samurai terminaremos la entrada explicando que nos permite hacer Compass, como dije anteriormente es una extensión que nos permite automatizar, el trabajo y proceso con Sass.

Los archivos fuentes que genera Sass son .scss los cuales tienen que ser compilados asi que este proceso nos permite trabajar Compass haciendo lo siguiente:


compass compile compass/

Ahora con eso compilamos cualquire cambio que tenemos en el archivo fuente generando nuestro .scss pero no seria mejor algo que ande checando y revisando los cambios¿? para eso tenemos watch que estara atento a algun cambio que se tenga, mientras mantengamos corriendo el servicio, como si de un servidor se tratara, indicandonos los cambios que se tenga.


compass watch compass/


Bueno esto es todo por el dia de hoy, ya comenzaremos viendo con un ejemplo tal vez use Drupal :).





0 comentarios

Publicar un comentario en la entrada