Utiliser une quelconque compilateur CSS (Sass, Moins) pour générer le sélecteur [fermé]

Question

Je l'ai récemment été jouer avec les compilateurs CSS, mais je ne sais pas comment (ou s'il est possible) pour générer dynamiquement des morceaux d'un sélecteur.

Par exemple, disons que je voulais faire mixins pour obtenir

display: inline-block; 

pour travailler navigateur cross. Je dois faire les styles, oui, mais je dois faire pour les amener à travailler dans ces navigateurs trop les hacks de sélection IE6 / 7. Idéalement, je suis à la recherche d'une chose hors d'ajouter à un élément et ont la capacité de ce travail. Une personne type m'a récemment donné cette solution: CSS compilateurs et convertir entailles IE à css conditionnelle

et il serait bon de mettre en œuvre que de façon minimale qui me permettrait de le préciser pour un élément donné et sur mon chemin (par exemple en moins, vous pouvez créer une classe avec des styles, passer cette classe à une autre élément, et cet élément hériteront tous ces styles il serait agréable de passer un .inline-bloc d'élément;. et créer les styles nécessaires pour soutenir IE6 / 7 sans avoir à recourir à des choses comme

_color: pink; 

Toutes les idées?

EDIT: par exemple aussi bien, comment pourrais-je faire quelque chose comme clearfix pour MOINS? (Lesscss.org)? Si Sass ne peut le faire alors cela fonctionnera aussi.

Answer 1

Je l'ai fait quelques recherches dans la documentation, et une expérimentation, et Sass (à mon grand soulagement) soutient ce, bien que je ne pense pas moins fait (ce qui est la raison pour laquelle il devient abandonné en faveur de Sass).

Vous pouvez utiliser l'esperluette comme pointeur sur le sélecteur que vous avez utilisé dans la définition et la position de cette esperluette dans une déclaration imbriquée ne doit pas être à l'avant, vous pouvez mettre sélecteurs avant lui. Par exemple, vous pouvez utiliser des balises conditionnelles IE à IE cible dans la même feuille de style d'une manière qui n'utilise pas hacks. Ce qui suit utilise la notation SCSS (mais devrait fonctionner correctement avec la notation d'indentation):

@mixin inline-block {

// Cross browser implementation of the inline-block attribute

  display: inline-block;
  body.ie6 & { display: inline; }
  body.ie7 & { display: inline; }

}

Et tout ce que vous avez à faire est de déposer ce sur ce que vous voulez:

#foo { @include inline-block; }

et il va générer / gérer tous les vos trucs inline-block navigateur croix:

#foo { display: inline-block; }
body.ie6 #foo { display: inline; }
body.ie7 #foo { display: inline; }

façon sémantique de traiter les problèmes multi-navigateurs, pas plus avoir à traiter avec la méthode lourde de gestion 2 fichiers différents pour les styles (ce qui est stupide pour moi), pas plus chancres bloc de code.

Modifier. Bien sûr, cette fonctionnalité a été indiqué dans la documentation ancienne, pas dans la nouvelle, ce qui est la raison pour laquelle je ne pouvais pas trouver

Answer 2

Une implémentation cross-browser de inline-block est fourni par la boussole, un cadre construit sur SASS:

http: // Boussole- style.org/docs/reference/compass/css3/inline_block/#mixin-inline-block-scss

Answer 3

http://jsfiddle.net/zsitro/G74pT/

Ici, vous voyez van la solution crossbrowser pour les blocs inline.  simple et court.

exemple ci-dessus ne donnera pas une mise en page à l'élément dans IE. Vous avez besoin zoom par exemple.