© Proxym-IT                                                                       http://twitter.com/proxymit             ...
© Proxym-ITIntroduction                                                                 http://twitter.com/proxymit       ...
© Proxym-ITIntroduction                                                                 http://twitter.com/proxymit       ...
© Proxym-ITIntroduction                                                                            http://twitter.com/prox...
© Proxym-ITIntroduction au LESS                                                                         http://twitter.com...
© Proxym-IT Avantages de l’utilisation de LESS                                                                            ...
© Proxym-IT   Travailler avec LESS                                                                                        ...
© Proxym-ITLes variables                                                                                            http:/...
© Proxym-ITLes mixins                                                                                           http://twi...
© Proxym-ITLes mixins : paramétrable                                                                                      ...
Les mixins : les définitions                                                                               © Proxym-IT    ...
© Proxym-ITRègles imbriqués                                                                                          http:...
© Proxym-ITAutres fonctionnalités                                                                                         ...
© Proxym-ITConclusion                                                                         http://twitter.com/proxymit•...
© Proxym-IT                                                   http://twitter.com/proxymitMerci pour votre   attention     ...
Prochain SlideShare
Chargement dans…5
×

LESS, Le CSS avancé

1 011 vues

Publié le

Présentation sur le langage LESS.

0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 011
Sur SlideShare
0
Issues des intégrations
0
Intégrations
297
Actions
Partages
0
Téléchargements
11
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

LESS, Le CSS avancé

  1. 1. © 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
  2. 2. © Proxym-ITIntroduction http://twitter.com/proxymit Coins arrondis effets textuels ombres multi- colonage 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
  3. 3. © Proxym-ITIntroduction http://twitter.com/proxymit Coins arrondis Langage non dynamique effets textuels Pas de notion de variables ombres Pas de notion multi- de procédures colonage 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
  4. 4. © Proxym-ITIntroduction http://twitter.com/proxymitAvec 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… 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
  5. 5. © Proxym-ITIntroduction au LESS http://twitter.com/proxymitPas tout-à-fait, car ce problème commun àtous les intégrateur et les développeurspourrait avoir une solution avec LessCSS !LESS nous propose un langage de présentationqui étend CSS pour lui apporter ce qu’ilmanque. 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
  6. 6. © Proxym-IT Avantages de l’utilisation de LESS http://twitter.com/proxymit Règles imbriquésImportations Commentaires Augmenter la lisibilité et lorganisation des CSS en Diminuer la utilisant quantité du code CSS à l’aide Les variables Les mixins Gestion des couleurs 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
  7. 7. © Proxym-IT Travailler avec LESS http://twitter.com/proxymit 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> 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
  8. 8. © Proxym-ITLes variables http://twitter.com/proxymit• 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éclarationsCode 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’];} 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
  9. 9. © Proxym-ITLes mixins http://twitter.com/proxymit• 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;} 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
  10. 10. © Proxym-ITLes mixins : paramétrable http://twitter.com/proxymit• Ils sont paramétrablesCode 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);} 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
  11. 11. Les mixins : les définitions © Proxym-IT http://twitter.com/proxymit 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) { ... } 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
  12. 12. © Proxym-ITRègles imbriqués http://twitter.com/proxymit• Avec les règles imbriqués, LESS permet d’écrire du code CSS sans répétitionsCode 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; } } }} 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
  13. 13. © Proxym-ITAutres fonctionnalités http://twitter.com/proxymit Les opérateurs Code LESS@baseColor : #444;@base: 5%;@filler: @base * 2; Evaluation du code JavaScript@other: @base + @filler;color: #888 / 4; Code LESSbackground-color: @baseColor + #111; @str: "hello";height: 100% / 2 + @filler; @var: ~`"@{str}".toUpperCase() + !`; Gestion des couleursCode LESSlighten(@color, 10%); // return a color which is 10% *lighter* than @colordarken(@color, 10%); // return a color which is 10% *darker* than @color…fadein(@color, 10%); // return a color 10% *less* transparent than @colorfadeout(@color, 10%); // return a color 10% *more* transparent than @color 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
  14. 14. © Proxym-ITConclusion http://twitter.com/proxymit• 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? 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
  15. 15. © Proxym-IT http://twitter.com/proxymitMerci pour votre attention 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

×