Référence à une classe/mixin sans complètement l'importation du fichier MOINS

Question

Je suis en utilisant les racines d'un thème pour wordpress: https://github.com/retlehs/roots/

Il est livré avec un fichier bootstrap.css et recommande d'utiliser l'app.css pour toutes les personnalisations. Comme je n'ai pas les options pour ajouter des classes pour les boutons via html ou javascript, j'aimerais utiliser le MOINS de sources de référence d'une classe css, par exemple, je veux faire un bouton de soumission du fichier d'amorce style de bouton:

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

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

Answer 1

La principale question à vous poser est

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

En tant que de MOINS de la version 1.5

Pour MOINS de 1,5, il est maintenant possible d'importer un fichier purement comme une référence. Comme suit:

@import (reference) 'bootstrap.less';

Pas de code de sortie à partir de ce fichier CSS, mais tout devient disponible pour l'utiliser comme mixin.

Réponse originale à cette question (à conserver pour le contexte pour tous les commentaires)

[AVERTISSEMENT: il est incertain si ce serait de travailler comme 1.3.3, mais cette réponse originale à cette question, je ne crois qu'il a une certaine utilité dans les versions ultérieures ainsi. Cependant, pour vraiment obtenir ce que l'OP veut, la nouvelle capacité de MOINS de 1,5 est recommandé.]

Les versions actuelles de MOINS (1.3.3) peut accueillir ce grâce à l'utilisation d'un espace de noms. Comme suit:

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

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

En faisant de l'espace de noms d'un mixin (l'ajout de parenthèses après le nom), il sera toujours importer le fichier (je ne connais pas de moyen d'y accéder de l'extérieur sans avoir à les importer), mais il ne devrait pas compiler le réel le code de démarrage dans votre dernier fichier css de sortie. Ce que cette technique devrait faire est de vous permettre d'accéder à l'amorçage de classes, mixin, etc., par le biais de l'espace de noms appelez #bootstrapRef >, ce qui permet d'utiliser ceux de votre propre défini les classes, etc.

Je n'ai pas entièrement testé si il y a un bug à ce, il devrait fonctionner en théorie.

Answer 2

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;
}

résultant dans des classes supplémentaires d'être déclaré de mixin.moins et de variables.de moins en moins. La plupart du temps juste .clearfix , puis tous les de la .btn des classes sont ajoutés input#submit

Voir la longue sortie ici:

http://pastebin.com/ZBAZZ3kS

Answer 3

Je ne sais pas si il existe un outil pour importer uniquement actuelle se référant règles css dans un fichier externe, mais de Bootstrap a une structure très organisée, afin de vérifier si les styles que vous cherchez sont sur mixins.less, de sorte que vous n'avez pas à importer la totalité de l' bootstrap.less le fichier.

Aussi, vérifiez cette question connexe, il ya quelques bonnes Meilleures Pratiques pour personnaliser Bootstrap.

EDIT: Comme @PavloMykhalov suggèrent, c'est peut-être mieux de regarder des buttons.less

Remarque: Il sera un outil génial pour ce genre de choses. Un jour je vais travailler sur ce

Answer 4

Ne sais pas ce que vous a fait croire que MOINS prend actuellement en charge que, pour que cela soit possible l'option doit être beaucoup plus explicite, actuellement c'est vraiment tout simplement les importations, analyse, enregistre des morceaux, exécute des morceaux dans le texte de sortie.

À moins qu'il n'y a rien d'explicite pour arrêter cette séquence, il ne sera pas le faire tout différemment.

Je viens de connecté une demande en vertu de MOINS, ne sais pas pour vous si cela a été demandé avant si, cherché et rien trouvé, j'espère ne pas obtenir giflé pour la répétition!

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

Mise à JOUR Les questions s'est avéré être un doublon, la question ouverte est ici: https://github.com/cloudhead/less.js/issues/622