Cette section est close pour le moment.
Mais je n'arrête pas la veille, loin de là. Retrouvez mes projets sur Github et sur cette page qui sera à jour plus régulierement


Ressources

Définition de ressource : (nom féminin) Qui peut fournir ce dont on a besoin.
Vous l'aurez compris, sur cette page ce ne sont pas vraiment des tutoriels, c'est plutôt des penses-bêtes plus ou moins fournis mais qui vous permettront d'avoir des bases concernant la programmation.
Recherche par tag

Coder votre CSS avec des variables en utilisant Less

Coder votre CSS avec des variables en utilisant Less
Publication : Le 06/11/2012 à 02:17:06

Introduction

Une des faiblesses du CSS est de ne pas pouvoir utiliser des variables afin de modifier plus facilement le graphisme de votre site.

Avec le CSS LESS c'est maintenant chose possible. En plus d'apporter des variables, CSS Less va vous simplifier l'écriture de certaines balises.

Installation du module {LESS}

Pour installer le script Less trois moyens s'offrent à vous :

- En incluant le fichier js
- En utilisant la compilation PHP côté serveur
- En installant le script en ligne de commande

En incluant le fichier JS

Il vous faudra télécharger le fichier less.js et l'inclure de la manière la plus classique dans votre code. Attention à bien déclarer votre fichier de style Less avant en utilisant les bons attributs (dont rel=stylesheet/less).
<link rel="stylesheet/less" type="text/css" href="style.less">
<script type="text/javascript" src="less.js"></script>
Cette solution est assez gourmande en ressource côté client. Compresser le plus possible votre fichier less pour gagner du temps.

Compiler le fichier Less en PHP

Télécharger la librairie lessc.inc.php et insérer le dans votre code en utilisant la méthode ci-dessous : (Le code va compiler et créer directement le fichier Less en CSS que vous n'aurez plus qu'à inclure)
<?php
require 'lessc.inc.php';
try {
     lessc::ccompile('style-entree.less', 'style-sortit.css');
} catch (exception $ex) {
     exit('lessc fatal error:'.$ex->getMessage());
}
?>
<link rel="stylesheet" type="text/css" href="styleCompile.css" />
Installer le script en ligne de commande

Si vous possédez un serveur dédié, la meilleur solution sera d'installer le script en ligne de commande (pour cette dernière méthode, référez-vous à la documentation pour avoir plus de détails).
$ npm install less

Le CSS avec des variables

Pour déclarer une variable, il faut que celle-ci commence par un @ suivi du nom. Cette variable pourra être appelé à tout moment dans votre fichier.
/* Variable */
@couleur : red;

/* Utilisation */
html{color:@couleur}
a{color:#fff}
a:hover{color:@couleur}
div{border:solid 1px @couleur}
Vous pouvez également faire des opérations (addition, soustraction, multiplication et division) :
@colleft:300px;
@colright:400px;
.container{
width: @colleft + @colright + 10;
}
Le CSS3 c'est sympa, mais taper plusieurs fois la même commande pour que celle-ci soit interprétée dans les navigateurs ça peut être contraignant.

Grâce aux Mixins vous allez pouvoir gagner du temps :
.my_box_shadow(@horizontal, @vertical, @blur, @spread, @hexa){
-webkit-box-shadow: @horizontal @vertical @blur @spread @hexa;
box-shadow: @horizontal @vertical @blur @spread @hexa;
}

div{
.my_box_shadow(2px, 2px, 1px, 3px, #f1f1f1);
}
(Mais les Mixins ne sont pas réservées qu'aux propriétés CSS 3 capricieuses, vous pouvez les utiliser pour définir des styles par défaut à certains blocs (couleur, size, margin, etc))

Une nouvelle façon de développer son CSS

A présent, nous pouvons utiliser une notion d'héritage pour développer plus vite.

On va pouvoir écrire les propriétés CSS en cascade, si une propriété est commune, par la peine de la ré-écrire :
/* Less */
.style1, .style2 ,.style3{
 h1{
  color:red;
  font-size:18px;
 }
 h2{
  font-size:16px;
 }
}
/* En css on aura */
.style1 h1, .style2 h1, .style3 h1{
  color:red;
  font-size:18px;
}
.style1 h2, .style2 h2, .style3 h2{
  color:red;
  font-size:16px;
}
De la même manière, nous allons pouvoir créer des pseudo-classes de la manière suivante :
/* Less */
a{
 color: blue;
 text-decoration: none;
 :hover {
  text-decoration:underline;
 }
}
/* En CSS */
a{color:blue;text-decoration:none}
a:hover{text-decoration:underline;}

Conclusion

Plus que pratique, cette façon de coder devrait s'imposer rapidement dans le monde des développeurs.

Sur le même thème

Coder votre CSS avec des variables en utilisant Less
Publication : Le 06/11/2012 à 02:17:06

Tags

Tags : jQuery - js / CSS

Suggestion :

Pourquoi faire un reset.css sur son site internet ?

Pourquoi faire un reset.css sur son site internet ?