LESS, Bootstrap et "copie" de classes

Bonjour,

Tout d'abord, je tiens à préciser que je ne connais vraiment rien à la technologie LESS, soyons précis tout de suite

J'utilise Bootstrap 2.3 depuis quelques temps et j'ai créé il y a quelques temps un thème pour Dotclear et modifiant TOUS les fichiers .html de Dotclear pour intégrer les classes de Bootstrap.

Je voudrais savoir comment faire pour conserver les fichiers .html de Dotclear originaux, tout en me servant de LESS pour "copier" certaines classes de Bootstrap 3.0 (si c'est possible).

Par exemple, sur Dotclear, j'ai un <input class="preview" /> assez moche. Au lieu d'éditer le code HTML pour ajouter <input class="preview btn" />, comment dire à LESS : .preview = .btn ?

Vous voyez l'idée ?


Merci par avance pour vos explications

Personne ?

Salut,

Les mixins permettent de faire ça.

.preview {
    .btn;
}
.preview2 {
    .btn;
}

qui va produire

.preview {
    /* toutes les déclarations de .btn */
}
.preview2 {
    /* toutes les déclarations de .btn */
}

Le risque est d'avoir un code CSS à rallonge à l'arrivée puisqu'il va te copier à chaque fois l'intégralité des déclarations dans ta règle...
Perso, j'aime beaucoup la possibilité qu'offre Sass d'étendre une règle via @extend.
C'est une des raisons de mon passage de Less vers Sass...

.preview {
  @extend .btn;
}
.preview2 {
  @extend .btn;
}

qui va produire

.btn,
.preview,
.preview2 {
    /* toutes les déclarations de .btn */
}

tm

tm™ a écrit :
Salut,

Les mixins permettent de faire ça.

.preview {
    .btn;
}
.preview2 {
    .btn;
}

qui va produire

.preview {
    /* toutes les déclarations de .btn */
}
.preview2 {
    /* toutes les déclarations de .btn */
}

Tu peux aussi faire ça en LESS :

.preview, .preview2 {
    .btn;
}

... Ce qui va produire ça :

.preview,
.preview2 {
  /* tous les trucs de .btn */
}

Donc pas de code à rallonge

Merci à vous 2 pour vos réponses qui me donnent déjà une base

En revanche, j'ai un souci... voici mon fichier LESS en l'état :

// Dotclear default template files to Bootstrap classes

#page {
	.container;
}

#wrapper {
	.row;
	.clearfix;
}

#main {
	.pull-left();
	.col-xs-12;
	.col-sm-12;
	.col-md-9;
	.col-lg-8;
}

#sidebar {
	.pull-right();	
	.col-xs-12;
	.col-sm-12;
	.col-md-3;
	.col-lg-4;
}

input[type="button"] {
    .btn;
	.btn-default;
}

input[type="submit"] {
	.btn;
	.btn-primary;
}

Le souci c'est que pour le moment, seuls les "input" sont bien mis en forme, pas le reste... C'est visible ici : http://dcdev.html-edition.com/

Qu'est-ce qui cloche ?


Merci

UP ?

Raphael a écrit :
Donc pas de code à rallonge

C'est vrai, mais du coup, tu multiplies les règles pour un même sélecteur.
C'est un moindre mal mais je reste avec mon Sass...

Les préprocesseurs CSS ne font que générer du CSS.

Ce CSS, tu peux le générer via du JavaScript comme tu sembles vouloir le faire.
En terme de performances (calcul, ressources, cache, ...) ce n'est pas top.
Dans ton cas, je ne sais pas si c'est lié mais, tu as une erreur JS dans le fichier "bootstrap.min.js" qui pourrait bloquer l'exécution de less.js...
Du coup, pas de CSS généré !

Personnellement, je pense qu'il est préférable de compiler son CSS en local (avec des outils comme Scout, Koala, Less.app, CodeKit, Hammer, etc) et de balancer la feuille de style qui va bien sur le serveur...