Moins et Bootstrap: comment utiliser un span3 (ou spanX [nombre]) classe mixin?

Nouvelle Réponse (nécessite MOINS de 1.4.0)

Ce que vous avez réellement le désir est quelque chose de connu comme extension en MOINS et SASS terminologie. Par exemple, vous voulez un élément HTML (juste un exemple)...

<div class="myclass"></div>

...à entièrement se comporter comme si elle avait un span3 classe de bootstrap, ajouté à cela, mais sans l'ajout de cette classe dans le code HTML. Cela peut être fait en MOINS de 1.4.0 à l'aide de :extend(), mais toujours pas facilement, principalement en raison de la dynamique de génération de classe de bootstrap ne seront pas ramassés par :extend().

Ici est un exemple. Assumer cette initiale de MOINS de code (pas généré dynamiquement .span3 classes de bootstrap):

.span3 {
  width: 150px;
}

.someClass .span3 {
  font-size: 12px;
}

.someOtherClass.span3 {
  background: blue;
}

Vous ajoutez ce MOINS de code en 1.4.0:

.myclass {
  &:extend(.span3);
}

Qui produit ce CSS:

.span3,
.myclass {
  width: 150px;
}
.someClass .span3 {
  font-size: 12px;
}
.someOtherClass.span3 {
  background: blue;
}

NOTE comment il n'a pas étendre automatiquement les autres instances de .span3. Ce qui est différent que SASS, mais il ne signifie que vous devez être un peu plus explicite dans l'extension. Cela a l'avantage d'éviter de trop CSS code de la météorisation.

Étendre complètement, il suffit d'ajouter le all mot-clé dans le extend() (c'est mis à jour à partir de mon code d'origine, comme j'étais pas au courant de la all option):

.myclass {
  &:extend(.span3 all);
}

Qui produit ce:

.span3,
.myclass {
  width: 150px;
}
.someClass .span3,
.someClass .myclass {
  font-size: 12px;
}
.someOtherClass.span3,
.someOtherClass.myclass {
  background: blue;
}

Qui rend votre .myclass entièrement équivalent (dans mon exemple) à la .span3 classe. Ce que cela signifie dans votre cas, cependant, est que vous avez besoin de redéfinir une classe dynamique des générations de bootstrap non-dynamique. Quelque chose comme ceci:

.span3 {
  .span(3);
}

C'est donc le :extend(.span3) trouverez une codés en dur de la classe pour s'étendre à d'. Cela devra être fait pour n'importe quel sélecteur de chaîne dynamique qui utilise .span@{index} pour ajouter le .span3.

Réponse Originale À Cette Question

Cette réponse suppose que vous désiré pour mixin propriétés à partir d'une générées dynamiquement classe (c'est ce que j'ai pensé que votre problème a été).

Bon, je crois que j'ai découvert votre problème. Tout d'abord, bootstrap définit le .spanX à la série de classes dans le mixin.moins fichier, de sorte que vous aurez évidemment besoin d'être sûr que vous avez compris que dans le fichier de démarrage de la charge. Cependant, je suppose que c'est une donnée que vous avez ceux qui figurent déjà.

Principal Problème

La question principale est de savoir comment bootstrap est la génération de ceux qui sont aujourd'hui, à travers une dynamique de nom de classe dans une boucle. C'est la boucle qui définit la .spanX série:

.spanX (@index) when (@index > 0) {
      .span@{index} { .span(@index); }
      .spanX(@index - 1);
 }
.spanX (0) {}

Actuellement, parce que le nom de la classe elle-même est généré dynamiquement, il ne peut pas être utilisé comme un mixin nom. Je ne sais pas si c'est un bug ou simplement une limitation de MOINS, mais je sais que à l'heure actuelle de l'écriture, tout générées dynamiquement nom de la classe ne fonctionne pas comme un mixin nom. Par conséquent, .span3 peut-être dans le code CSS pour mettre une classe dans votre code HTML, mais il n'est pas directement disponible pour l'accès à l'mixin fins.

Le Correctif

Toutefois, en raison de la façon dont ils ont structuré le code, vous pouvez toujours obtenir ce que vous avez besoin, car comme vous pouvez le voir ci-dessus dans la boucle de code, ils utilisent un vrai mixin lui-même pour définir le code de la .spanX classes. Par conséquent, vous devriez être en mesure de le faire:

.myclass {
    .span(3);
    //other rules...
}

La .span(3) code est ce que la boucle pour remplir la .span3 classe, donc de l'appeler pour vos cours vous donnera le même code que .span3. Plus précisément bootstrap a ce définies dans mixins.less pour que mixin:

.span (@columns) {
  width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
  *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
}

De sorte que vous obtiendrez le width propriétés de la .span3 dans votre .myclass.

OriginalL'auteur ScottS

Eh bien, vous pouvez le faire, mais vous devez définir .somethign tout d'abord, dans cet exemple, je vais le faire font-wight: bold; et font-size 20px. Comme vous pouvez le voir dans la deuxième classe .corps je n'avais pas à définir font-weight: bold; et font-size: 20px; j'ai juste ajouté .something en elle

.something {
    font-weight: bold;
    font-size: 20px;
}
.body {
    background-color: gray;
    border: ridge 2px black;
    .something
}

Vous pouvez voir un exemple ici. http://jsfiddle.net/7GMZd/

VOUS NE POUVEZ PAS LE FAIRE DE CETTE FAÇON

.body {
    background-color: gray;
    border: ridge 2px black;
    .something {
         font-weight: bold;
         font-size: 20px;
    }
}

OriginalL'auteur Kyrbi