Alphorm.com Formation Simplifier l’usage du CSS avec Less

Une formation
Sandy LUDOSKY
Formation
Simplifier l’usage
du CSS avec Less

Une formation
Introduction
1. Simplifier le CSS avec les langages préprocesseurs
2. Installation, usage & compiler les fichiers Less
3. Faire plus avec Less : les bases du langage
4. Plus de combinaisons CSS avec les mixins
5. Aller plus loin avec Less : inclusion, interpolation et les boucles
6. Plus de nuances couleurs avec les fonctions Less
7. PROJET : librairie CSS avec Less
Conclusion
Plan de la formation

Une formation
Niveau intermédiaire à avancé
Développeurs professionnels
Intégrateurs web
Public concerné

Connaissances requises
ReactJS ⚛

Présentation du projet
Une formation
Sandy LUDOSKY

Une formation
Projets
1. Démos & travaux pratiques
2. Projets : Librairie CSS avec Less
⚛

Ressources et outils
Une formation
Sandy LUDOSKY

Une formation
Les fichiers téléchargeables 📁
Version de démarrage
Version finale
Ressources

Une formation
Sandy LUDOSKY
Les plus de Less
Découvrir le langage

Les plus de Less : découvrir le langage
Less : Leaner Style Sheets
Pré-processeur et extension du langage CSS
Fonctionnalités étendues
functions, mixins, variables, imbrication, escaping,
maps ….
Style plus propre, ordonné, réutilisable et
dynamique
Une formation

Une formation
Sandy LUDOSKY
Simplifier le CSS avec Less
fonctionnalités et avantages

Variables
Mixins
Imbrication
Extend & regroupement de CSS
Merge (combiner du CSS)
CSS Guards
@import
@plugin
Maps (CSS prédéfini et réutilisable)
Une formation
Fonctionnalités

Avantages
Moins de code, plus compact et organisé
Compatible sur plusieurs navigateurs
Plus facile et plus rapide
Fonctions et règles CSS réutilisables
Fonctionnalité d’héritage avec extend
Fonctionnalité de merge
Une formation

Installation Less
Une formation
npm install less -g

Une formation
Sandy LUDOSKY
Découvrir les langages préprocesseurs
Less, Sass et autres

Découvrir les langages préprocesseurs : Less, Sass et autres

Une formation
Sandy LUDOSKY
Installer avec npm

Installation
npm install less -g
less -v

Usage
Navigateur (Javascript)
Côté serveur (Node.js)
less [option] <source> <destination>

Une formation
Sandy LUDOSKY
Compiler des fichiers less
premier exemple, syntaxe et les options

lessc [option] <source> <destination>
Usage

@color-base: #2d5e8b;
.class1 {
background-color: @color-base;
.class2 {
background-color: #fff;
color: @color-base;
}
}
Usage : less

.class1 {
background-color: #2d5e8b;
}
.class1 .class2 {
background-color: #fff;
color: #2d5e8b;
}
CSS compilé

Une formation
Sandy LUDOSKY
Compiler et surveiller
les changements dans les fichiers less

less-watch-compiler [option] <source> <destination>
Usage
less-watch-compiler styles/less src main.less

Une formation
Sandy LUDOSKY
Utiliser les outils
et interfaces graphiques

Koala (Mac et Windows)
http://koala-app.com/

Une formation
Sandy LUDOSKY
Définir des variables
dans un seul emplacement

// Variables
@link-color: #428bca; // sea blue
@link-color-hover: darken(@link-color, 10%);

// Usage
a,
.link {
color: @link-color;
}
a:hover {
color: @link-color-hover;
}

// Usage
@nice-color:#5B83AD;
#header {
color:@nice-color
}

// CSS
#header {
color: #5B83AD;
}

Une formation
Sandy LUDOSKY
Imbriquer des règles CSS

less
a {
color: blue;
&:hover {
color: green;
}
}

CSS
a {
color: blue;
}
a:hover {
color: green;
}

Une formation
Sandy LUDOSKY
Créer des sélecteurs
avec l’opérateur “&”

.button {
&-ok {
background-color: #1abc9c;
}
&-cancel {
background-color: #3498db;
}
&-custom {
background-color: #333;
}
}

.button-ok {
background-color: #1abc9c;
}
.button-cancel {
background-color: #3498db;
}
.button-custom {
background-color: #333;
}

Une formation
Sandy LUDOSKY
Etendre et combiner
les sélecteurs
extend

pseudo-class :extend(selector)
syntaxe imbriqué & :extend(selector)

.a:extend(.b) {}
// the above block does the same thing as the
below block
.a {
&:extend(.b);
}

.inline {}
// the above block does the same thing
as the below block
.a:extend(.inline) {}

.button-shared{
color: red;
}
a,.button-shared {
color: red;
}

.inline {
color: red;
}
nav ul {
.inline;
background: blue;
}

Une formation
Sandy LUDOSKY
Combiner les propriétés CSS
avec les mixins

less
.my-mixin {
color: black;
}
.class {
.my-mixin();
}

CSS
.my-mixin {
color: black;
}
.class {
color: black;
background: white;
}

Une formation
Sandy LUDOSKY
mixins avec parenthèses

.my-mixin {
color: black;
}
.my-other-mixin() {
background: white;
}
.class {
.my-mixin();
.my-other-mixin();
}

.my-mixin {
color: black;
}
.class {
color: black;
background: white;
}

Une formation
Sandy LUDOSKY
mixins avec paramètres

less
.mixin(@color) {
color: @color;
background: darken(@color, 10%);
border: 1px solid @color;
}
.button {
.mixin(#8e44ad)
}

CSS
.button {
color: #8e44ad;
background: #9b59b6;
border: 1px solid #8e44ad;
}

Une formation
Sandy LUDOSKY
mixins avec namespace

less
#my-library {
.my-mixin() {
color: black;
}
}
// which can be used like this
.class {
#my-library.my-mixin();
}

Une formation
Sandy LUDOSKY
guard mixins

.mixin(@a) when (lightness(@a) >= 50%) {
background-color: black;
}
.mixin(@a) when (lightness(@a) < 50%) {
background-color: white;
}

.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }

CSS
.class1 {
background-color: black;
color: #ddd;
}
.class2 {
background-color: white;
color: #555;
}

Une formation
Sandy LUDOSKY
variables pour les mixins

#theme.dark.navbar {
.colors(light) {
primary: purple;
}
.colors(dark) {
primary: black;
secondary: grey;
}
}

.navbar {
@colors:
#theme.dark.navbar.colors(dark);
background: @colors[primary];
border: 1px solid @colors[secondary];
}

Une formation
Sandy LUDOSKY
Appliquer des techniques
avancées dans son code

Une formation
Appliquer les techniques avancées
@ruleset
diviser et @import
interpolation
itérations et automatisation

Une formation
Sandy LUDOSKY
Encapsuler un ensemble
de règles CSS

// declare detached ruleset
@detached-ruleset: { background: red; }; // semi-colon is
optional in 3.5.0+
// use detached ruleset
.top {
@detached-ruleset();
}

Une formation
Sandy LUDOSKY
Découper le CSS
en plusieurs fichiers

Une formation
Découper le CSS en plusieurs fichiers
plusieurs fichiers simples
plus ordonné, plus gérable et plus flexible
regrouper avec @import

Une formation
Sandy LUDOSKY
Importer les fichiers less

Une formation
plusieurs fichiers simples
plus ordonné, plus gérable et plus flexible
regrouper avec @import

// myfile.less
.myclass {
color: blue;
}
.myclass1{
color: red;
}
@import "myfile.less";
.myclass2 {
color: brown;
}

.myclass {
color: blue;
}
.myclass1 {
color: red;
}
.myclass2 {
color: brown;
}
CSS compilé

Une formation
Sandy LUDOSKY
avec options

Une formation
Importer les fichiers less avec options
reference
inline
less
css
once
multiple
optional

@import (reference) "https://[...]/pure.less";
.my-button {
&:extend(.pure-button all);
}
reference
@import (inline) "https://[...]/pure.less";
.my-button {
&:extend(.pure-button all);
}

inline
// style.css
.style {
font-family: "Comic Sans MS";
font-size: 20px;
}
@import (inline) "style.css";
.my-button {
color: red
}

style.css
.style {
font-family: "Comic Sans MS";
font-size: 20px;
}
p {
color: red;
}

Une formation
Sandy LUDOSKY
Automatiser avec les boucles
boucles et interpolation

@iterations: 5;
.span-loop (@i) when (@i > 0) {
.span-@{i} {
width: ~"@{i}%";
}
.span-loop(@i - 1);
}
.span-loop (@iterations);

.span-5 {
width: 5%;
}
.span-4 {
width: 4%;
}
.span-3 {
width: 3%;
}

Une formation
Sandy LUDOSKY
Automatiser la création
de sélecteurs

Automatiser la création de sélecteurs
@color: #2c3e50;
@repetitions: 50;
.color-palette(@i) when (@i >= 10) {
.midnight-blue-@{i} {
background: lighten(@color, @i * 1%)
}
.color-palette(@i - 10);
}
.color-palette(@repetitions:);

Une formation
Sandy LUDOSKY
Contrôler la luminosité
lighten and darken

lighten
lighten(@color, @amount);
@color: #2c3e50;
.button {
background: lighten(@color, 20%); 0 => 100%
}

CSS
@color: #2c3e50;
.button {
background: #507192;
}
#2c3e50 #507192

darken
darken(@color, @amount);

Une formation
Sandy LUDOSKY
Manipuler la transparence
fadein and fadeout

Manipuler la transparence : fadein and fadeout
fadein(@color, @amount);

Une formation
Sandy LUDOSKY
Créer des combinaisons
des couleurs
mix

Créer des combinaisons de couleurs : mix
mix(@color1, @color2, @amount);

Créer des combinaisons de couleurs : mix
mix(#ff0000, #0000ff, 50%);
#0000ff #800080
#ff0000

Une formation
Sandy LUDOSKY
Varier les nuances et saturation
de teintes
spin et hue

Varier les nuances et saturation de teintes avec spin et hue
spin(@color, @amount); 0-100%
hue(@hue, @saturation, @lightness); 0-100%

Une formation
Sandy LUDOSKY
Créer une librairie
de composants avec less

Projet : Librairie CSS avec Less
⚛
Library

Une formation
Sandy LUDOSKY
Démarrer le projet
les ressources et les fichiers less

Créer une librairie de composants avec less
📁 components/
📁 styles/
📁 less/
…
main.less
button.less
…
Une formation

Une formation
Sandy LUDOSKY
Automatiser la création
des sélecteurs

Une formation
Sandy LUDOSKY
Créer une application
monopage avec less

Une formation
Sandy LUDOSKY
Démarrer le projet avec less

Une formation
Sandy LUDOSKY
Conclusion

Alphorm.com Formation Simplifier l’usage du CSS avec Less

Contenu connexe

Similaire à Alphorm.com Formation Simplifier l’usage du CSS avec Less

Plus de Alphorm

Alphorm.com Formation Simplifier l’usage du CSS avec Less