is more ! mercredi 30 janvier 13
Jun 04, 2015
is more !
mercredi 30 janvier 13
{ }A propos de moi
‣ Gauthier Eloy
‣ 25 ans
‣ Namur
‣ Diplômé en multimédia Liège
‣ Web & UI designer iGLOO.be
mercredi 30 janvier 13
}{ Qui a déjà utilisé un préprocesseur CSS ?
mercredi 30 janvier 13
0
12,5
25
37,5
50
5
13
23
3
7
2
46
1
SASSSCSSLESSSTYLUSI don't like any of themI don't have a preferenceI've never tried any of themOther
css-tricks.com 13 000 personnes
June 2012
mercredi 30 janvier 13
{ }Le CSS aujourd’hui
‣ Ses avantages
‣ CSS3
‣ Ses problèmes
‣ Redondance du code
‣ Pas de structure procédurale
‣ Manque de flexibilité
‣ Organisation linéaire, pas d’héritage
mercredi 30 janvier 13
}{ Time is moneyGagnez 50% de votre temps en production
mercredi 30 janvier 13
{ }Le préprocesseur CSS
‣ Définition
‣ Avantages :
‣ Maintenabilité & organisation
‣ Rapidité de développement & robustesse
‣ Nouveaux outils pratiques & productivité
mercredi 30 janvier 13
{ }Less en pratique
1. Variables
2. Nested rules
3. Opérations
4. Mixins & fonctions
mercredi 30 janvier 13
}{ Less talk,more action!
mercredi 30 janvier 13
}{ 1. Variables
mercredi 30 janvier 13
Less CSS
CSS
mercredi 30 janvier 13
}{ 2. Nested rules
mercredi 30 janvier 13
CSS
Less CSS
mercredi 30 janvier 13
}{ 3. Opérations
mercredi 30 janvier 13
Less CSS
CSS
mercredi 30 janvier 13
Less CSS
CSS
mercredi 30 janvier 13
}{ 4.Mixins & fonctions
mercredi 30 janvier 13
CSS
mercredi 30 janvier 13
Less CSS
mercredi 30 janvier 13
CSS
Less CSS
mercredi 30 janvier 13
mercredi 30 janvier 13
mercredi 30 janvier 13
}{ Fonctions
mercredi 30 janvier 13
CSS
Less CSS
mercredi 30 janvier 13
escape red
ceil
floor
saturate
negation
rgb
rgba
luma
hslhsla
hsv
hsva
green
bluehue
percentage
lightness
saturation
alpha
desaturatedarken
fadein
average
fadespin
mixgreyscalecontrast
multiply
screen overlaysoftlight
hardlight
difference exclusion
mercredi 30 janvier 13
{ }Installation
simpLESShttp://wearekiss.com/simpless
LESSapphttp://incident57.com/less/
mercredi 30 janvier 13
mercredi 30 janvier 13
mercredi 30 janvier 13
mercredi 30 janvier 13
mercredi 30 janvier 13
mercredi 30 janvier 13
mercredi 30 janvier 13
{ }Pour aller plus loin...
Documentation Less
‣ lesscss.org
Librairies existantes
‣ lesselements.com
Twitter Bootstrap
‣ github.com/bootstrap/
Inuit CSS
‣ github.com/peterwilsoncc/inuit.css
mercredi 30 janvier 13
}{ Merci !dribbble.com/pixelize
@gauthiereloy
linkedin.com/in/gauthiereloy
mercredi 30 janvier 13
is more !
mercredi 30 janvier 13