Les pré-processeurs CSS Dereck, Eric, Jessy et Paola

Slides:



Advertisements
Présentations similaires
Feuilles de style CSS - XHTML est un langage impur
Advertisements

HTML CSS.
Faculté I&C, Claude Petitpierre Cascaded style sheets CSS.
HTML CSS.
CSS.
Faculté I&C, Claude Petitpierre Cascaded style sheets CSS.
Template joomla Leblanc 2011.
HTML Cours 3. Plan du cours Les feuilles de styles CSS Mise en forme du texte et des paragraphes.
24 novembre 2008 – Claude BUENO– ITSYSTEM – Joomla, logiciel de gestion de contenu en mode open source, permet de réaliser.
Présentation du système GNU/ LINUX Journée des Logiciels Libres - 10 Décembre 2006.
Outils et scénarios d’édition collaborative en Haute École Étienne Vandeput Projet HETICE © CRIFA - ULg.
Les ORMs ● Faire coexister le monde relationnel et objet.
Marcel Bosc Introduction Web Université Paris-13Département informatiqueIUT de Villetaneuse ère année, cours - 1/5.
Apéro SPIP – 16 Novembre 2009 SPIP en chiffres. Les sites SPIP* Introduction Présentation Avantages / Inconvénients SPIP 2.0 Après SPIP 2.0 Démonstration.
Marcel Bosc Introduction Web Université Paris-13Département informatiqueIUT de Villetaneuse ère année, cours - 2/5.
Le Smartpen Echo EMPRUNTER UN SMARTPEN DE LA BIBLIOTHÈQUE DE L’UQTR.
Plus belle la vie avec HTML5 et CSS3
Faciliter l'écriture collaborative : les wikis AWT#6 jeudi 19 février 2009 Kévin DESCOUBES & Sylvain NAUDIN.
1 Doxygen. 2 Doxygen : qu’est-ce que c’est ? Code C++, Java,... ● Un générateur de documentation – pour C + +, mais aussi C, Java, Fortran,... – Il fonctionne.
Le Bug Tracking Pourquoi chasser les insectes? Théotim Delannay Aymeric Boisard.
1 Programmation en C++ IO en C++/SL ● Standard Library ● Types, objets pour IO ● L'entrée de clavier ● Sortie à l'écran ● Fichiers.
1. 2 Boite à outils Qt ● Boite à outils C++ pour le développement multi-plateforme d'application en environnement graphique (GUI) – des fonctions GUI.
Créer un site web avec WordPress
AMUE – SIFAC Gestion des services fait sur SIFAC WEB
E-Prelude.com Importation de nomenclatures issues de divers logiciels de CAO… … via un fichier « neutre » de type EXCEL.
Javascript et DOM Introduction Nicolas Chourot Informatique
DropBox Projet App’Ifa.
Présentation de l'association CENABUMIX
Utilisation de Windows
Session 1 6 mars 2017 Plateforme ICONICS Justine Guégan
Vérification du Système fichiers et réparation
Plateforme CountrySTAT Aperçu global de la préparation des tableaux dans la nouvelle plateforme CountrySTAT FORMATION DES POINTS FOCAUX SUR LE SYSTEME.
Page 4-3 Le programme InSQL Configure
Les feuilles de style Qt
Grunt : introduction Qu'est-ce que Grunt ?
Téléchargement IOS - Commande tftpdnld du ROM Monitor
Plugin POSH.
Généralité sur les bases de données
Comprendre les valeurs
Principes de programmation (suite)
Master Réseaux et Systèmes Distribués (RSD) Algorithmique des systèmes
Création de site web Feuilles de style.
Python for beginners Qu'est ce que Python
Le CSS Principe de séparation du contenu et de la mise en forme
Système d’exploitation Windows XP
Module 1 : Réaliser un site internet
Feuilles de style Cascading Style Sheets
mardi 11 septembre 2018mardi 11 septembre 2018
Documentation technique (Linux)
Notion De Gestion De Bases De Données
Création Et Modification De La Structure De La Base De Données
Base de Données, RFID et Langage SQL
Package R Markdown: Un outil pour générer des pages html avec R Studio
DATA WEARHOUSE 1ère année LA: Technologies systèmes d’information
Introduction à Internet
Formation sur les bases de données relationnelles.
Informatique de base Pr. Namar Ydriss Cours 3: Introduction
CountrySTAT / FENIX Aperçu globale de la préparation des tableaux dans la nouvelle plateforme CountrySTAT FORMATION DES POINTS FOCAUX SUR LE SYSTEME.
Programmation Android Première application Android
Assembleur, Compilateur et Éditeur de Liens
Le logiciel de calcul de Reynaers
RVMS – Expectations for Written Work
Les gestionnaires de positionnement
Windows 7 NTFS.
Global Challenge Capteur de nuit Leçon 2.
Donnez votre avis ! Depuis votre smartphone, sur :
PROGRAMMATION ET ENSEIGNEMENT
Chapter 11: Récursivité Java Software Solutions Second Edition
Conception des pages Web Styles (CSS)
Gestion des destinataires (recipients)
Transcription de la présentation:

Les pré-processeurs CSS Dereck, Eric, Jessy et Paola

Plan de la présentation Introduction Pré-processeurs, qu’est-ce que c’est ? Pré-processeurs CSS SCSS LESS Conclusion

Introduction … pour introduire Jessy

Les pré-processeurs Qu’est-ce que c’est ? Jessy

Les pré-processeurs Un programme intermédiaire qui reçoit des données qui doivent être interprété et transformé en des données pouvant servir à un autre logiciel Peut être comparé à PHP Jessy

Pré-processeurs CSS cess… css… ssssssss... Jessy & Paola

Donc un pré-processeurs CSS : Permet de coder dans un autre langage Souvent inspiré du CSS Générer le CSS Jessy

Permet d’aller au-delà des limitations du CSS Variables Classes Pré-processeurs CSS Pourquoi s’en servir ? Permet d’aller au-delà des limitations du CSS Variables Classes Équations mathématiques Imbrication de code Paola

Pré-processeurs CSS D’autres Les plus populaires CSS-Crush Myth Rework Les différents pré-processeurs CSS existant Les plus populaires D’autres CSS-Crush Myth Rework Clay DtCSS Switch CSS et plus encore... Paola

SCSS Sassy CSS Éric

Définition Sass 3.0 a introduit une nouvelle syntaxe, plus proche de CSS, appelée SCSS. SCSS est un “métalangage” de CSS, ce qui signifie que tout ce qui est valide en CSS l’est aussi en SCSS.

Installer et utiliser Ruby doit être installé sur votre système Il suffit de lancer la commande suivante dans votre terminal : gem install sass Créer le fichier : style.scss Nous allons maintenant générer la feuille de style CSS à partir du fichier style.scss: sass style.scss:style.css À chaque fois qu’on fait des modifications dans le fichier scss il faut lancer la commande (pour prendre en compte les modifications dans le fichier css): sass --watch style.scss:style.css

Variables Particularités Mixins Sélecteurs Heritage Importation de fichier $colorLink: #aa33dd; $paddingLink: 10px; $imagePath: "../../img/"; a { display: block; padding: $paddingLink; color: $colorLink; background: url($imagePath+'mon-image.png') left top scroll no-repeat; }

Mixins Particularités Variables Sélecteurs Heritage SCSS @mixin border-radius { -moz-border-radius: 5px; border-radius: 5px; } article { @include border-radius; } aside { @include border-radius; } CSS article { aside { Variables Mixins Sélecteurs Heritage Importation de fichier

Sélecteurs Particularités Variables Mixins Heritage SCSS article { > h1 { font-size: 1.2em; border-bottom: 1px dashed #ccc; } + footer { border-top: 1px dashed #ccc; } ~ article { margin-top: 1.5em; } * { color: #000; } } CSS article > h1 { font-size: 1.2em; border-bottom: 1px dashed #ccc; } article + footer { border-top: 1px dashed #ccc; } article ~ article { margin-top: 1.5em; } article * { color: #000; } Variables Mixins Sélecteurs Heritage Importation de fichier

Héritage Particularités Variables Mixins Sélecteurs .radius { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .button { @extend .radius; } .icon { @extend .radius; } .box { @extend .radius; } Variables Mixins Sélecteurs Héritage Importation de fichier

Importation de fichier Particularités /* fichier layout.scss */ .page { width: 960px; margin: 0 auto; } /* fichier style.scss */ @import 'layout.css'; .page h1 { font-size: 1.5em; } Variables Mixins Sélecteurs Héritage Importation de fichier

LESS pour en faire plus ;-) Dereck

Définition Less est un pré-processeur CSS. C’est à dire qu’il ajoute des fonctionnalités au CSS déja existant. Permet de rendre le CSS plus facile à maintenir, à modifier et à faire évoluer.

Façons de l’utiliser Console On installe LESS sur la machine. On appelle les fonctions LESS et les différentes composantes via la ligne de commande. $ lessc styles.less styles.css $ lessc --clean-css styles.less styles.min.css Dans le code CSS On ajoute LESS directement dans le code. On appelle les fonctions LESS et les différentes composantes à travers le CSS. var less = require('less'); less.render('.class { width: (1 + 1) }', function (e, output) { console.log(output.css); });

Droits d’utilisation Apache Version 2.0 License Permet: Télécharger et utiliser librement Less.js Utiliser Less.js dans des distributions que l’on crée et distribue Empêche: Redistribuer n’importe quelle partie de Less.js sans mentionner les origines. Requis: Inclure une copie de la license dans chacune des distributions Clairement indiqué que Less.js provient de “The Less Core Team”

Variables Particularités Extend Import options CSS guards (IF) Loops (FOR) Merge @link-color: #428bca; // sea blue @link-color-hover: darken(@link-color, 10%); // Usage a, .link { color: @link-color; } a:hover { color: @link-color-hover; } .widget { color: #fff; background: @link-color; }

Extend Particularités Variables Import options CSS guards (IF) Loops (FOR) Merge Ceci en less: nav ul { &:extend(.inline); background: blue; } .inline { color: red; } Donne ceci en CSS: nav ul { background: blue; } .inline, nav ul { color: red; }

Import options Particularités Variables Extend CSS guards (IF) Loops (FOR) Merge Syntax: @import (keyword) "filename"; reference: use a Less file but do not output it inline: include the source file in the output but do not process it less: treat the file as a Less file, no matter what the file extension css: treat the file as a CSS file, no matter what the file extension once: only include the file once (this is default behavior) multiple: include the file multiple times optional: continue compiling when file is not found

CSS guards (IF) Particularités Variables Extend Import options Loops (FOR) Merge button when (@my-option = true) { color: white; }

Loops (FOR) Particularités Variables Extend Import options CSS guards (IF) Loops (FOR) Merge .loop(@counter) when (@counter > 0) { .loop((@counter - 1)); // next iteration width: (10px * @counter); // code for each iteration } div { .loop(5); // launch the loop }

Merge Particularités Variables Extend Import options CSS guards (IF) Permet de concaténer plusieurs propriétés séparées par une virgule ou un espace. .mixin() { box-shadow+: inset 0 0 10px #555; } .myclass { .mixin(); box-shadow+: 0 0 20px black; } .myclass { box-shadow: inset 0 0 10px #555, 0 0 20px black; } Variables Extend Import options CSS guards (IF) Loops (FOR) Merge

Conclusion … pour conclure Paola

Sitepoint Vanseodesign Base22 Webnet La-cascade Seemios-blog LessCss Sources Sitepoint Vanseodesign Base22 Webnet La-cascade Seemios-blog LessCss Less Wikipédia