rails + brújula: ventajas frente al uso de haml + blueprint directamente

Question

Tengo experiencia en el uso de haml (+ sass) en proyectos de rieles. Recientemente comencé a usarlos con blueprintcss, lo único que hice fue transformar blueprint.css en un archivo sass y comencé a codificar desde allí. Incluso tengo un rails generator que incluye todo esto por defecto.

Parece que Compass hace lo que hago, y otras cosas. Intento entender cuáles son esas otras cosas, pero la documentación/tutoriales no fueron muy claros.

estas son mis conclusiones:

• Brújula viene con incorporada mixins Sass que implementan expresiones CSS comunes, tales como enlaces con iconos o listas horizontales. Mi solución no proporciona nada de eso. (1 punto para Compass).
• Brújula tiene varias opciones de línea de comandos : puede crear un proyecto de rieles, pero también puede "instalarlo" en un proyecto de rieles existente. Un generador de rieles podría personalizarse para hacer lo mismo, supongo. (Corbata).
• brújula tiene dos modos de trabajar con blueprint: uso "básico" y "semántico". No tengo claro las diferencias entre ellos. Con mi generador de rieles solo tengo un modo, pero parece suficiente. (Empate)
• Aparentemente, Compass está preparado para usar otros marcos, además de blueprint (por ejemplo, YUI). No pude encontrar mucha documentación sobre esto, y no estoy interesado en eso de todos modos - blueprint está bien para mí (Tie).
• La curva de aprendizaje de Compass parece un poco rígida y la documentación parece escasa. Aprender puede ser un poco difícil. Por otro lado, conozco los pormenores de mi propio sistema y puedo usarlo de inmediato. (1 punto para mi sistema).

Con este análisis, dudo en darle una oportunidad a Compass.

¿Mi análisis es correcto? ¿Me estoy perdiendo algún punto clave o he evaluado erróneamente alguno de estos puntos?

Answer 1

Compass parecía una gran solución para mí también, pero después de probarlo en un proyecto realmente no vi la gran ventaja de usarlo para mí. Al igual que usted, estoy bien con blueprint, y no vi la necesidad de agregar otra capa encima de haml/sass.

Finalmente quité la brújula de ese proyecto y acabo de ir con una versión sass de los archivos CSS del modelo, y voy desde allí. Guardo cualquier estilo personalizado/adicional en un archivo sass separado y eso es todo. No hay necesidad de brújula ni nada de eso si solo quieres mantenerlo simple.

Answer 2

'Modo semántico' se refiere a la posibilidad de utilizar nombres de clase más semánticos que los que proporcionan los marcos de css: .article vs .grid_1. que personalmente creo que es un gran +.

Answer 3

No estoy seguro de si estos recursos solo han aparecido recientemente, pero ¿has visto el Compass CSS3 helpers y el General utilities? (Ambos bien documentados en mi opinión) - realmente han acelerado mi interfaz genera mucho.

Otro gran recurso es el Compass plugins page.

Personalmente, me gusta copiar estos archivos de utilidad Sass en el rubygem e incluirlos manualmente en los archivos Sass de mi proyecto, ya que se siente bastante extraño al hacer referencia a Sass que se almacena fuera del proyecto.

Answer 4

El objetivo ideal es la separación del estilo y el contenido: no siempre es posible al 100%, pero se puede hacer razonablemente bien mediante el uso de marcado semántico. Blueprint y otros marcos de CSS fallan por completo en esto.

La idea original detrás de Compass era evitar la contaminación de HTML con el marcado visual generado por Blueprint: si está escribiendo class="column-4" en su marcado, entonces también podría poner style="width:160px" allí. Semánticamente es el mismo significado, y la misma cantidad de repetición para mantener.

brújula se vuelve una clase Blueprint como .column-4 en un mixin que se puede aplicar a un selector de sentido:

#sidebar 
    +column(4) 

De esta manera, sólo es necesario para mantenerlo en la hoja de estilo, no a través de una serie de plantillas y Archivos HTML

Compass es consciente de los proyectos. Manejará compilar todo su árbol de hojas de estilo, incluso automáticamente al guardar cuando ejecuta compass watch.

Hay algunas funciones muy útiles proporcionados por la brújula, por ejemplo:

IMAGE_URL es una función configurable que puede manejar las rutas relativas o absolutas o incluso configurar la rotación de activos anfitriones si es necesario.

El módulo CSS3 se encarga de todas las reglas de estilo específico del explorador para las esquinas redondeadas, sombras, etc.

utilidades

generales proporcionan ayudantes para las cosas que haces todo el tiempo, pero con menos repetición (especialmente para los problemas entre navegadores). Estas son algunas de las básicas que utilizo mucho:

• + clearfix y + Pie-clearfix (compensación entre navegadores métodos)
• + flotar asegura que no se olvide display: inline delante de él para IE ... (si llega el momento de eliminar los IE antiguos, es un cambio único.)
• + reemplazar-texto se oculta el texto y coloca un fondo de reemplazo de imagen.
• + asomar-enlace añade el: hover subrayar regla a un estilo de vínculo de base

Puede comprobar estos en la nueva docs site for Compass.

Luego, Compass proporciona las instalaciones para una serie de otros marcos de estilo además del Blueprint incorporado. Consulte Susy, por ejemplo, que es un marco de diseño nativo de Sass, no solo un puerto CSS. Se especializa en redes flexibles y fluidas.