web-dev-qa-db-fra.com

Référencez une classe / mixin sans importer complètement le fichier LESS

J'utilise le thème des racines pour wordpress: https://github.com/retlehs/roots/

Il est déjà livré avec un bootstrap.css précompilé et recommande d'utiliser app.css pour toutes les personnalisations. Comme je n'ai pas les options pour ajouter les classes aux boutons via html ou javascript, je voudrais utiliser les sources LESS pour référencer une classe css, par exemple, je veux donner à un bouton d'envoi le bootstrap:

input#submit{
.btn;
.btn-primary;
}

Si j'utilise @import 'bootstrap.less'; il ajoute la totalité du bootstrap css dans app.css. Comment puis-je simplement utiliser le bootstrap.less comme référence pour la compilation?

csstwitter-bootstrapless
47
FLX

La question centrale que vous posez est

"Comment puis-je simplement utiliser le fichier bootstrap.less comme référence pour la compilation?"

À partir de LESS version 1.5

Pour LESS 1.5, il est désormais possible d'importer un fichier uniquement à titre de référence. Ainsi:

@import (reference) 'bootstrap.less';

Aucun code réel ne sortira de ce fichier en CSS, mais tout devient disponible pour être utilisé en tant que mixage.

Réponse originale (conservée pour le contexte de tous les commentaires)

[AVIS DE NON-RESPONSABILITÉ: il n'est pas certain que cela fonctionne à partir de la version 1.3.3, mais cette réponse originale, je crois, a également une certaine utilité dans les versions ultérieures. Cependant, pour vraiment obtenir ce que l'OP voulait, la nouvelle capacité de LESS 1.5 est recommandée.]

Les versions actuelles de LESS (1.3.3) peuvent s'adapter à cela grâce à l'utilisation d'un espace de noms. Ainsi:

#bootstrapRef() {
  @import: 'bootstrap.less':
}

input#submit{
  #bootstrapRef > .btn;
  #bootstrapRef > .btn-primary;
}

En faisant de l'espace de noms un mixage (l'ajout des parenthèses après le nom), il importera toujours le fichier (je ne connais aucun moyen d'y accéder en externe sans importer), mais il ne devrait pas compiler le réel bootstrap dans la sortie finale de votre fichier css. Ce que cette technique doit faire est de vous permettre d'accéder aux classes de bootstrap, aux mixins, etc., via l'appel d'espace de noms #bootstrapRef >, Ce qui permet d'utiliser ceux de vos propres classes définies, etc.

Je n'ai pas entièrement testé s'il y a des bugs, cela devrait fonctionner théoriquement.

53
ScottS

Faire cela en MOINS est un peu délicat mais peut être réalisé comme suit:

#bootstrap() {
    .btn() {
        @import "bootstrap/variables.less";
        @import "bootstrap/mixins.less";
        @import "bootstrap/buttons.less";
    }
}

input#submit{
  #bootstrap > .btn;
}

ce qui entraîne la déclaration de certaines classes supplémentaires à partir de mixins.less et variables.less. Surtout juste .clearfix puis tous les .btn les classes sont ajoutées à input#submit

Voir la longue sortie ici:

http://Pastebin.com/ZBAZZ3kS

4
Declan Cook

Je ne sais pas s'il existe un outil pour importer uniquement les règles CSS de référence actuelles dans un fichier externe, mais Boostrap a une structure très organisée, alors vérifiez si les styles que vous recherchez sont sur mixins.less, vous n'avez donc pas à importer l'intégralité de bootstrap.less fichier.

Vérifiez également ceci question connexe , il existe de bonnes pratiques pour personnaliser Boostrap.

EDIT: Comme @PavloMykhalov le suggère, il vaut peut-être mieux regarder buttons.less

Remarque: Ce sera un outil génial pour ce genre de choses. Un jour je travaillerai dessus

3
Tom Sarduy

Je ne sais pas ce qui vous a fait croire que LESS prend actuellement en charge le fait que, pour que cela soit possible, l'option doit être beaucoup plus explicite, il importe actuellement simplement, analyse, enregistre des morceaux, exécute des morceaux dans le texte de sortie.

À moins qu'il n'y ait rien d'explicite pour arrêter cette séquence, cela ne se fera pas différemment.

Je viens de consigner une demande de fonctionnalité sous MOINS, je ne sais pas avec certitude si cela a déjà été demandé auparavant, j'ai cherché et n'ai rien trouvé, j'espère que je ne serai pas giflé pour la répétition!

https://github.com/cloudhead/less.js/issues/1169

[~ # ~] mise à jour [~ # ~] Les problèmes se sont avérés être un doublon, le problème ouvert est ici: https: //github.com/cloudhead/less.js/issues/622

1
Ayyash