rails + boussole: avantages par rapport à l'aide directement haml + plan

Question

J'ai une certaine expérience en utilisant haml (+ SASS) sur des projets de rails. J'ai récemment commencé à les utiliser avec blueprintcss - la seule chose que j'ai été transformée blueprint.css dans un fichier SASS, et a commencé à coder à partir de là. J'ai même un rails générateur qui comprend tout cela par défaut.

Il semble que Compass fait ce que je fais, et d'autres choses. J'essaie de comprendre ce que ces autres choses sont -. Mais la documentation / tutoriels ne sont pas très claires

Ce sont mes conclusions:

• Compass est livré avec intégré mixins SASS qui mettent en œuvre des idiomes CSS communs, tels que des liens avec des icônes ou des listes horizontales. Ma solution ne fournit pas quelque chose comme ça. (1 point de boussole).
• Compass a plusieurs Options de ligne de commande : vous pouvez créer un projet rails, mais vous pouvez aussi « installer » sur un projet existant rails. Un rails générateur peut être personnalisé pour faire la même chose, je suppose. (Tie).
• Compass a deux modes de travailler avec plan: l'utilisation "de base" et "sémantique". Je ne suis pas clair sur les différences entre ceux-ci. Avec mes rails générateur je n'ai un mode, mais il semble assez. (Tie)
• Apparemment, Compass est prêt à l'utilisation d'autres cadres , en plus de modèle (par exemple YUI). Je ne pouvais pas trouver beaucoup de documentation à ce sujet, et je ne suis pas intéressé à ce sujet de toute façon -. Plan est ok pour moi (Tie)
• la courbe d'apprentissage de Compass semble un peu raide et la documentation semble clairsemée. L'apprentissage pourrait être un peu difficile. D'autre part, je connais les tenants et les aboutissants de mon propre système et peut l'utiliser tout de suite. (1 point pour mon système).

Avec cette analyse, je suis hésitant à donner Compass essayer.

Mon analyse est correcte? Suis-je manque sont des points clés, ou ai-je évalué aucun de ces points à tort?

Answer 1

Compass ressemblait à une grande solution pour moi aussi, mais après avoir essayé sur un projet que je n'ai pas vraiment le grand avantage de l'utiliser pour moi. Comme vous, je suis très bien avec plan, et je ne vois pas la nécessité d'ajouter une autre couche sur le dessus de haml / SASS.

J'ai finalement dépouillé la boussole de ce projet et juste aller avec une version SASS des fichiers CSS blueprint, et aller de là. Je stocke des styles personnalisés / supplémentaires dans un fichier séparé SASS et c'est tout. Pas besoin de boussole ou quelque chose comme ça si vous voulez juste garder les choses simples.

Answer 2

L'objectif idéal est la séparation de style et de contenu: ce n'est pas toujours possible à 100%, mais il peut être fait assez bien en utilisant un balisage sémantique. Plan directeur et d'autres cadres CSS ne tout à fait à ce sujet.

L'idée originale derrière Compass était d'éviter la pollution HTML avec le balisage visuel qui génère Blueprint: si vous êtes class="column-4" d'écriture dans votre balisage, alors vous pourriez aussi bien mettre style="width:160px" là à la place. Sémantiquement c'est le même sens et la même quantité de répétition pour maintenir.

Compass se classe Blueprint comme .column-4 dans un mixin que vous pouvez appliquer à un sélecteur de sens:

#sidebar
  +column(4)

De cette façon, il vous suffit de le maintenir dans la feuille de style, pas à travers un certain nombre de modèles et les fichiers HTML.

Compass est un projet conscient. Il se chargera de compiler votre arbre ensemble de feuilles de style, même automatiquement, sauf lorsque vous exécutez compass watch.

Il y a quelques fonctions très utiles fournies par la boussole, par exemple:

image_url est une fonction configurable qui peut gérer des chemins relatifs ou absolus ou même mettre en place la rotation des hôtes d'actifs si vous avez besoin.

Le module CSS3 prend soin de toutes les règles de style spécifiques au navigateur pour les coins arrondis, des ombres, etc.

Utilitaires générales fournir des aides pour les choses que vous faire tout le temps, mais avec moins de répétitions (en particulier pour les questions inter-navigateur). Ce sont là quelques ceux de base que j'utilise beaucoup:

• + clearfix et + tarte clearfix (méthodes de compensation cross-browser)
• + flotteur vous assure ne pas oublier display: inline devant pour IE ... (. Si vient le temps de laisser tomber les vieux IEs, il est un seul changement)
• + remplacer texte cache le texte et les positions d'arrière-plan de remplacement d'image.
• + vol stationnaire-link ajoute le: hover règle de soulignement à un style de lien de base

Vous pouvez vérifier ces sur la nouvelle docs site pour Compass .

Ensuite, Compass fournit les installations pour un certain nombre d'autres cadres de style en plus du Plan directeur intégré. Ne consultez Susy par exemple, qui est un cadre de mise en page Sass natif, non seulement un port CSS. Elle est spécialisée dans les réseaux souples et fluides.

Answer 3

« mode sémantique » fait référence à la possibilité d'utiliser les noms de classes sémantiques que les cadres de ceux livrés avec: .L'article vs .grid_1. que je pense personnellement est un grand +.

Answer 4

Je ne sais pas si ces ressources ont montré que jusqu'à récemment, mais avez-vous vu le Compass aides CSS3 et les services d'utilité générale - (à la fois bien documenté à mon avis) - ils ont vraiment accéléré mon interface construit beaucoup.

Une autre grande ressource est le plugins Compass .

Personnellement, j'aime copier ces fichiers utilitaire Sass le rubygem et les ajouter manuellement dans les fichiers Sass de mon projet car il se sent assez bizarre référencement Sass qui est stocké sur le projet.