Tutoriels sur Joomla et la création de site

LESS est un langage dynamique de feuilles de style qui améliore le CSS avec des comportements dynamiques tels que des variables, des mixins, des opérations et des fonctions. LESS permet que votre code soit plus propre, optimisé tout en réduisant également la durée globale pour créer et maintenir votre base de code.

Gantry prend en charge LESS, en implantant le compilateur et les processus de base dans le Framework lui-même. En outre, les templates administration et frontend sont construits avec des fichiers LESS qui sont alors envoyés comme des fichiers CSS vers le navigateur. Gantry gère tout le traitement complexe, de sorte que vous puissiez vous concentrer uniquement sur le style.

Remarque, lors des modifications, n'oubliez pas de:

1. Modifier toujours le fichier .less et non pas les fichiers compiled .css qui sont rendus dans le dossier /css-compiled/
2. Vous assurer que les dossiers du template /less/, /css/, et /css-compiled/ sont inscriptibles
3. Nettoyer les caches de Less, Gantry et du navigateur

LESS: l'essentiel

LESS est conçu pour améliorer le CSS, ainsi vous débutez selon les principes de base et les attributs qui sont associés au CSS, IDs, classes et tous les autres. Par conséquent, le format vous semblera familier. En termes d'exemples, les fichiers /LESS seront présentés d'abord, suivis par les fichiers Compiled CSS qui sont les fichiers de sortie qui apparaissent dans le répertoire /css-compiled/ .

Variables

Ce sont des valeurs standards qui peuvent être répétés tout au long de vos feuilles de style, et ainsi, un changement de ligne va générer un changement global, plutôt que d'avoir à changer manuellement chaque instance. Un exemple à partir du template Gantry est ci-dessous:

    //LESS
     @bodytitle: #303030;
     ...
     a:hover {
     color: @bodytitle;
     }
     h1, h2, h3, h4, h5, h6 {
     color: @bodytitle;
     }
     /* Compiled CSS */
     a:hover {
     color: #303030;
     }
     h1, h2, h3, h4, h5, h6 {
     color: #303030;
     }
 

Comme vous pouvez le voir dans l'exemple ci-dessus, n'importe où @bodytitle est utilisé dans les fichiers LESS, il sera remplacé par #303030 dans le compilateur.

Mixins

Mixins combine des Variables avec des Fonctions en vous permettant d'inclure toutes les propriétés associées à une classe dans une autre. Ces injections de classe peuvent inclure des fonctions, comme le montre l'exemple issu de LessCSS.org ci-dessous:

    //LESS
     .rounded.corners (@radius: 5px) {
     border-radius: @radius;
     -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
     }
     #header {
     .rounded.corners;
     }
     #footer {
     .rounded.corners(10px);
     }
     /* Compiled CSS */
     #header {
     border-radius: 5px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     }
     #footer {
     border-radius: 10px;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     }
 

Règles imbriquées

Les Règles imbriquées servent à l'héritage, ce qui permet à vos feuilles de style d'être plus propres et plus courtes en plaçant des groupes de sélection les unes dans les autres, plutôt que de spécifier chaque instanciation à chaque fois. Voir un exemple de template Gantry ci-dessous:

    //LESS
     ul.menu {
     list-style: none;
     margin: 0;
     padding: 0;
     ul {
     list-style: none;
     }
     li {
     margin-bottom: 8px;
     a, .item, .separator {
     display: block;
     font-size: 1.1em;
     font-weight: bold;
     }
     }
     }
     /* Compiled CSS */
     ul.menu {
     list-style: none;
     margin: 0;
     padding: 0;
     }
     ul.menu ul {
     list-style: none;
     }
     ul.menu li {
     margin-bottom: 8px;
     }
     ul.menu li a, ul.menu li .item, ul.menu li .separator {
     display: block;
     font-size: 1.1em;
     font-weight: bold;
     }
 

Fonctions & Opérations

Les Fonctions & Operations vous permettent d'effectuer des opérations mathématiques sur les valeurs de CSS aussi bien que de manipuler ces valeurs par des fonctions, comme c'est possible avec JavaScript. Voyez l'exemple ci dessous tiré de LessCSS.org:

    //LESS
     @the-border: 1px;
     @base-color: #111;
     @red: #842210;
     #header {
     color: @base-color * 3;
     border-left: @the-border;
     border-right: @the-border * 2;
     }
     #footer {
     color: @base-color + #003300;
     border-color: desaturate(@red, 10%);
     }
     /* Compiled CSS */
     #header {
     color: #333;
     border-left: 1px;
     border-right: 2px;
     }
     #footer {
     color: #114411;
     border-color: #7d2717;
     }
 

Le schéma ci-dessus est là pour vous présenter les notions de bases de LESS. Pour une présentation plus détaillée du fonctionnement des variables, mixins, fonctions et opérations, veuillez visiter :LessCSS.org.

LESS dans le Template Gantry

Tous les fichiers LESS associés au template sont situés dans le répertoire /templates/[TEMPLATE]/less/ . Gantry 4 utilise un puissant compilateur LESS basé sur du PHP produit par lessphp. Gantry 4 délivre les fichiers LESS transformés dans le répertoire /templates/[TEMPLATE]/css-compiled/ .

Tous les fichiers CSS ne sont pas compilés en un seul fichier. Tout fichier CSS qui doit être autonome, pour l'application de paramètres de template (comme le chargement de Fusion Menu à la place de SplitMenu) sera indépendant du fichier principal /templates/[TEMPLATE]/css-compiled/[OUTPUT_CSSFILE].

Comment sont compilés les fichiers LESS?

Quand un changement est repéré, Gantry recompile automagiquement vos fichiers LESS dans des fichiers CSS. Pour...