Probablemente el acercamiento definitivo al problema de la generación de estilos cross-browser y cross-platform son los preprocesadores CSS tales como SASS y LESS. Es probable que en el mundo del desarrollo web, vaya a ser en un futuro cercano tan extraño hacer Javascript sin jQuery como hacer CSS sin un preprocesador.
Las razones por las que SASS tiene ventaja por sobre el resto de los procesadores no es materia de discusión de este post, sino la forma de trabajar con este procesador.
Qué es y para qué sirve SASS?
Sass es una extensión de CSS3 que agrega variables anidadas, reglas, mixins, herencia de selectores y otras cosas relacionadas. El resultado es CSS bien formado y ayuda a que sea más mantenible.
Un preprocesador es una pieza de software que trasforma "hojas de estilo" escritas con su propia sintaxis a hojas de estilo estándar. Lo anterior es últil pues es capaz de (entre otras múltiples cosas):
- Escribir automáticamente todos los hacks, para hacer las equivalencias entre navegadores
- Mantener variables globales para centralizar atributos (ej: color)
- Pueden extenderse para generar funcionalidad mucho más específica
Compass
Compass es un Framework construído sobre SASS. A través de las extensiones de esta herramienta se pueden tener funcionalidades automatizadas en la creación de las hojas de estilo.
Instalación de Compass
La instalación de Compass está bien documentada tanto para Windows como para Linux. En la página de Compass con las instrucciones de instalación se recomienda instalar rvm. Yo también lo recomiendo, por posibles problemas de compatibilidad con las versiones de Ruby con los componentes que necesite un proyecto particular de Compass (en particular Omega4).
Crear un subtheme con Omega4
El themeOmega 4 para Drupal 7 permite crear un subtheme con Drush. Es importante ejecutar el comando parado en la raíz del proyecto. Es fundamental NO tener el módulo omega_tools ya que causa problemas con la creación vía Drush del subtheme.
Los pasos para generar un subtheme con Drush son los siguientes:
- Bajar el theme omega 4
- Activar el theme omega4
-
Limpiar el cache de Drupal y de Drush:
drush cc all
drush cc drush
-
Ejecutar el comando del wizard de Omega:
drush omega-wizard
En mi caso voy a mi theme "Tifon" con nombre de máquina "tifon" y lo voy a instalar en sites/all/themes. Luego de haber hecho el wizard de Omega mi consola se ve de la siguiente forma:
![Captura de pantalla de la consola con el resultado de la creación de un subtheme de Omega.]()
francort@TIFONv1:~/public_html/omega_blog$ drush omega-wizard
Please enter the name of the new sub-theme [Omega Subtheme]: Tifon
Please enter a machine-readable name for your new theme [tifon]: tifon
Please choose a base theme for your new theme
[0] : Cancel
[1] : Ohm (Subtheme of Omega) - Omega based demonstration theme. Serves as a best-pra
updated as best practice evolves so shouldn't be used in production.
[2] : Omega - A powerful HTML5 base theme framework utilizing tools like Sass, Compas
2
Please choose a starterkit for your new theme
[0] : Cancel
[1] : Default: Comes with a well organized Sass setup with heavy use of parti
1
Please choose a destination. This is where your sub-theme will be placed [sites/
Do you want to keep the starterkit's readme files? (y/n): y
Do you want to enable your new theme? (y/n): y
Do you want to make your new theme the default theme? (y/n): n
Do you want to download the libraries defined in libraries.make now? (y/n): y
Make new site in the current directory? (y/n): y
Beginning to build libraries.make.
selectivizr downloaded from https://github.com/fubhy/selectivizr/archive/master.
html5shiv downloaded from https://github.com/fubhy/html5shiv/archive/master.zip.
respond downloaded from https://github.com/fubhy/respond/archive/master.zip.
matchmedia downloaded from https://github.com/fubhy/matchmedia/archive/master.zi
pie downloaded from https://github.com/fubhy/pie/archive/master.zip.
You have successfully created the theme Tifon (tifon) in sites/all/themes.
francort@TIFONv1:~/public_html/omega_blog$
Luego de lo anterior van a la carpeta en la que se ha creado el subtheme (en mi caso sites/all/themes/tifon) y editan la descripción del theme. La descripción por defecto es "Please provide a description for your theme." y yo lo cambién por "Tema principal de Tifón".
Sería recomendable también en esta etapa:
a) Cambiar el archivo logo.png por su propio logo.
b) Cambiar el archivo screenshot.png por algún archivo de diseño de su propio theme.
Continuará en Tutorial de theming con Omega 4 y SASS parte 2
Usando Compass en Omega4
Lo primero que hay que hacer en un theme, es decidir cuál será el layout o diagramación que utilizará el theme. Por defecto, Omega4 usa Singularity
-->
Últimos Comentarios