LESS, Le CSS avancé

© Proxym-IT
http://twitter.com/proxymit

CSS : avancé

Département Web2.0 Veille technologique
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com

© Proxym-IT

Introduction

Coins
arrondis

effets
textuels

ombres

multi-
colonage

Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90

© Proxym-IT

Introduction

Coins
arrondis Langage non
dynamique
effets
textuels
Pas de
notion de
variables
ombres

Pas de notion
multi- de procédures
colonage

Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90

© Proxym-IT

Introduction

Avec CSS:
• On ne peut pas réutiliser une partie d’un style
pour l’appliquer à un autre.
• On ne peut pas paramétrer des styles
semblables.
• On ne peut pas déclarer des constantes et les
réutiliser.
• On ne peut pas faire d’opérations
simples sur des tailles, des fonts
et des couleurs…

Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90

© Proxym-IT

Introduction au LESS

Pas tout-à-fait, car ce problème commun à
tous les intégrateur et les développeurs
pourrait avoir une solution avec LessCSS !

LESS nous propose un langage de présentation
qui étend CSS pour lui apporter ce qu’il
manque.
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90

© Proxym-IT

Avantages de l’utilisation de LESS

Règles
imbriqués
Importations
Commentaires

Augmenter la lisibilité et
l'organisation des CSS en Diminuer la
utilisant quantité du code
CSS à l’aide

Les variables
Les mixins Gestion des
couleurs
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90

© Proxym-IT

Travailler avec LESS

Il y a globalement trois façons d’utiliser LESS

LESS
En ligne de
Directement dans commande
CSS
un navigateur $ lessc styles.less > styles.css

Sur le serveur node.js

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90

© Proxym-IT

Les variables

• La déclaration d’une variable se fait de la façon
suivante: @nom de la variable: valeur
• Ensuite, on peut les réutiliser dans les propriétés CSS
de nos déclarations
Code LESS Rendu CSS
@borderColor: #DDD; .dialog {
@txtColor: #ABC; border: 1px solid #DDD;
.dialog { color: #ABC;
border: 1px solid @borderColor; }
color: @txtColor; .menu {
} border-bottom: 1px solid #DDD;
.menu { color: #ABC;
border-bottom: 1px solid }
@borderColor;
color: .dialog[‘color’];
}
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90

© Proxym-IT

Les mixins

• les mixins ressemblent à des variables contenant des
propriétés CSS.
• Cela permet d’utiliser le même jeu de propriétés CSS
dans plusieurs classes.
Code LESS Rendu CSS
.bordered { .widget-title {
border-top: 2px solid black; color: #333;
border-bottom: 1px solid #ccc; border-top: 2px solid black;
} border-bottom: 1px solid #ccc;
.widget-title { }
color: #333; nav.main-menu li {
.bordered; color: #3C0;
} border-top: 2px solid black;
nav.main-menu li { border-bottom: 1px solid #ccc;
color: #3C0; }
.bordered;
}

Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90

© Proxym-IT

Les mixins : paramétrable

• Ils sont paramétrables
Code LESS Rendu CSS
.bordered (@btop: 2px, @bcolor: #ccc){ .widget-title {
border-top: @btop solid black; color: #333;
border-bottom: 1px solid @bcolor; border-top: 1px solid black;
} border-bottom: 1px solid black;
.widget-title { }
color: #333; nav.main-menu li {
.bordered(1px, black); color: #3C0;
} border-top: 2px solid black;
nav.main-menu li { border-bottom: 1px solid #CCC;
color: #3C0; }
.bordered(2px , #CCC);
}

Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90

Les mixins : les définitions © Proxym-IT

conditionnelles
• Appliquer des contrôles sur les paramètres.
Code LESS
.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
.mixin (@a, @b: black) when (iscolor(@b)) { ... }
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

• Et même sur les périphériques pour un CSS responsive.
Code LESS
.mixin (@a) when (@a > 10), (@a < -10) { ... } @media: mobile;
.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }

Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90

© Proxym-IT

Règles imbriqués

• Avec les règles imbriqués, LESS permet d’écrire du code
CSS sans répétitions
Code LESS Rendu CSS
#header { #header { color: black; }
color: black; #header .navigation {
.navigation { font-size: 12px;
font-size: 12px; }
} #header .logo {
.logo { width: 300px;
width: 300px; }
&:hover { #header .logo:hover {
text-decoration: none text-decoration: none;
} }
}
}

Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90

© Proxym-IT

Autres fonctionnalités

Les opérateurs
Code LESS
@baseColor : #444;
@base: 5%;
@filler: @base * 2; Evaluation du code JavaScript
@other: @base + @filler;
color: #888 / 4; Code LESS
background-color: @baseColor + #111; @str: "hello";
height: 100% / 2 + @filler; @var: ~`"@{str}".toUpperCase() + '!'`;

Gestion des couleurs
Code LESS
lighten(@color, 10%); // return a color which is 10% *lighter* than @color
darken(@color, 10%); // return a color which is 10% *darker* than @color
…
fadein(@color, 10%); // return a color 10% *less* transparent than @color
fadeout(@color, 10%); // return a color 10% *more* transparent than @color
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90

© Proxym-IT

Conclusion

• LESS est à mon avis l’outil que CSS manquait
pour renforcer ses développements.
• LESS ne remplace pas CSS. C’est un méta-
langage qui permet de générer du code CSS.
• Mais la question qui se pose, pourquoi CSS n’a
pas pensé à intégrer toutes
ces fonctionnalités?

Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90

LESS, Le CSS avancé

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (17)

LESS, Le CSS avancé