Introductions aux notions de performances web et des temps d'affichage des pages : notions, avantages financiers, ce qui ralentit le web, comment mesurer, quelques exemples, comment accélérer ses pages concrètement.
Depuis que je fais de l'intégration (un paquet d'années), j'ai toujours été très concerné par les standards, l'accessibilité et la sémantique.
Il se trouve cependant qu'avec l'expérience, on se rend compte que les contraintes de production et de performances ont bien évolué en 15 ans : à force de respecter d'antiques préceptes on crée des fichiers CSS lourds, redondant, et non réutilisables. C'est pourquoi 12% des plus gros sites mondiaux comptent plus de 50 occurences de "!important".
Ces aberrations peuvent être évitées en utilisant judicieusement des CSS efficaces.
Nicole Sullivan (ex-Yahoo!) a ouvert la voie en créant "OOCSS" (CSS orientés “objet”), d’autres tels que Jonathan Snooks ou Kaelig Deloumeau-Prigent ont suivi le mouvement.
Voyons quelles réelles remises en question nous attendent pour parvenir à nos fins.
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascriptcodedarmor
Le web, nouvelle définition : les possibilités étendues de HTML5 marquent un tournant dans le développement de sites et d'applications web riches. Lors de cette soirée, nous ferons une revue des possibilités offertes par HTML5, CSS3 et Javascript, des applications mobiles aux jeux vidéo en passant par la diffusion de médias audio et vidéo.
Présenté par Benjamin Anseaume de Sushee.fr et Erwan Hesry
Objectif général : Prendre en main le framework CSS le plus utilisé
Objectifs opérationnels
Positionner du contenu avec le système de grille
Créer des barres de navigation
Mettre en forme des tableaux
Créer des formulaires
Créer des boutons
Mettre en forme des images
KNACSS est une feuille de style CSS minimaliste, responsive et extensible pour débuter une intégration HTML / CSS --> http://knacss.com/
KNACSS est né d'un constat que nous faisons quotidiennement dans notre agence web :
- La plupart des frameworks CSS sont de grosses usines à gaz que l'on n'exploite très partiellement (environ 10% à 20% au mieux)
- Ils nécessitent quasi systématiquement qu'on redéfinisse à sa sauce la moitié des styles
- Ils ne sont pas négligeables en terme de poids de fichiers
KNACSS n'est pas non-plus un "reset" CSS classique tels que ceux que l'on trouve chez Eric Meyer, Yahoo UI ou Normalizr, que l'on estime trop agressifs et qui nécessitent que l'on redéfinisse chaque élément par la suite. Il se charge du minimum pour éviter les différences d'affichage flagrantes.
Chez Alsacréations, et par expérience, on préfère de loin un socle de base minimaliste qui convienne tel quel à tous les nouveaux projets, mais qui puisse être progressivement enrichi. C'est le cas de KNACSS.
Voici une présentation sur l’HTML5 que j’ai réalisé pour l’entreprise Sfeir dans laquelle je travaille. Bien que vous n’ayez pas accès à tout le contenu retranscrit à l’oral, elle peut déjà vous apporter une synthèse assez complète de ce que cette technologie apporte.
Sass et Compass ont embelli mon quotidien, Sud Web 2013Mehdi Kabab
Ce n'est un secret pour personne : le travail d'intégrateur peut rapidement tourner au cauchemar. Entre le support des navigateurs obsolètes, la prise en charge des nouveaux devices numériques et la disparité des niveaux technologiques disponible sur le marché, l'intégrateur (ou développeur front-end) doit jongler entre de multiples langages et connaître une liste interminable de hacks a appliquer pour satisfaire tout ce petit monde.
Que diriez-vous de vous simplifier la vie avec CSS grâce à Sass/Compass ?
Dans cette conférence SudWeb de 20 minutes, j'explique comment l'usage du préprocesseur CSS et de son framework CSS3 ont su embellir mon quotidien et m'ont incités à penser objet, documenter mes projets.
Tout n'étant jamais rose, j'aborde quelques pièges en mesure de nuire à l'avancement d'un projet.
Introductions aux notions de performances web et des temps d'affichage des pages : notions, avantages financiers, ce qui ralentit le web, comment mesurer, quelques exemples, comment accélérer ses pages concrètement.
Depuis que je fais de l'intégration (un paquet d'années), j'ai toujours été très concerné par les standards, l'accessibilité et la sémantique.
Il se trouve cependant qu'avec l'expérience, on se rend compte que les contraintes de production et de performances ont bien évolué en 15 ans : à force de respecter d'antiques préceptes on crée des fichiers CSS lourds, redondant, et non réutilisables. C'est pourquoi 12% des plus gros sites mondiaux comptent plus de 50 occurences de "!important".
Ces aberrations peuvent être évitées en utilisant judicieusement des CSS efficaces.
Nicole Sullivan (ex-Yahoo!) a ouvert la voie en créant "OOCSS" (CSS orientés “objet”), d’autres tels que Jonathan Snooks ou Kaelig Deloumeau-Prigent ont suivi le mouvement.
Voyons quelles réelles remises en question nous attendent pour parvenir à nos fins.
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascriptcodedarmor
Le web, nouvelle définition : les possibilités étendues de HTML5 marquent un tournant dans le développement de sites et d'applications web riches. Lors de cette soirée, nous ferons une revue des possibilités offertes par HTML5, CSS3 et Javascript, des applications mobiles aux jeux vidéo en passant par la diffusion de médias audio et vidéo.
Présenté par Benjamin Anseaume de Sushee.fr et Erwan Hesry
Objectif général : Prendre en main le framework CSS le plus utilisé
Objectifs opérationnels
Positionner du contenu avec le système de grille
Créer des barres de navigation
Mettre en forme des tableaux
Créer des formulaires
Créer des boutons
Mettre en forme des images
KNACSS est une feuille de style CSS minimaliste, responsive et extensible pour débuter une intégration HTML / CSS --> http://knacss.com/
KNACSS est né d'un constat que nous faisons quotidiennement dans notre agence web :
- La plupart des frameworks CSS sont de grosses usines à gaz que l'on n'exploite très partiellement (environ 10% à 20% au mieux)
- Ils nécessitent quasi systématiquement qu'on redéfinisse à sa sauce la moitié des styles
- Ils ne sont pas négligeables en terme de poids de fichiers
KNACSS n'est pas non-plus un "reset" CSS classique tels que ceux que l'on trouve chez Eric Meyer, Yahoo UI ou Normalizr, que l'on estime trop agressifs et qui nécessitent que l'on redéfinisse chaque élément par la suite. Il se charge du minimum pour éviter les différences d'affichage flagrantes.
Chez Alsacréations, et par expérience, on préfère de loin un socle de base minimaliste qui convienne tel quel à tous les nouveaux projets, mais qui puisse être progressivement enrichi. C'est le cas de KNACSS.
Voici une présentation sur l’HTML5 que j’ai réalisé pour l’entreprise Sfeir dans laquelle je travaille. Bien que vous n’ayez pas accès à tout le contenu retranscrit à l’oral, elle peut déjà vous apporter une synthèse assez complète de ce que cette technologie apporte.
Sass et Compass ont embelli mon quotidien, Sud Web 2013Mehdi Kabab
Ce n'est un secret pour personne : le travail d'intégrateur peut rapidement tourner au cauchemar. Entre le support des navigateurs obsolètes, la prise en charge des nouveaux devices numériques et la disparité des niveaux technologiques disponible sur le marché, l'intégrateur (ou développeur front-end) doit jongler entre de multiples langages et connaître une liste interminable de hacks a appliquer pour satisfaire tout ce petit monde.
Que diriez-vous de vous simplifier la vie avec CSS grâce à Sass/Compass ?
Dans cette conférence SudWeb de 20 minutes, j'explique comment l'usage du préprocesseur CSS et de son framework CSS3 ont su embellir mon quotidien et m'ont incités à penser objet, documenter mes projets.
Tout n'étant jamais rose, j'aborde quelques pièges en mesure de nuire à l'avancement d'un projet.
Il n’existe à ce jour plus une seule application Web qui n’utilise pas « CSS », ces fichiers qui permettent de styliser son application. Aujourd’hui, « CSS3 » nous permet d’écrire des applications du plus en plus attrayantes mais n’est pas encore idéal puisque nous constatons des manques comme par exemple la définition de constantes de couleurs, chose appréciable pour les sites en marque blanche. Notons également la difficulté pour factoriser et maintenir ce code.
Une lueur d’espoir est apparue, grâce à « Less ». C’est un framework qui non seulement nous facilite l’écriture de nos fichiers CSS, mais nous aide également à les maintenir et à mieux les structurer, tout en ayant des outils que nous pouvons utiliser dans nos usines logiciels.
Les préprocesseurs CSS, c'est chouette ! Mais aujourd'hui, avec l'évolution des standards, est-il toujours aussi pertinent de les utiliser de manière systématique au sein de nos projets web ? Sont-il si bénéfiques ? Ou, au contraire sont-il à l'origine de mauvaises pratiques ? Bref... CSS natif fait-il mieux ?
Mieux travailler le css avec sass:compassGuy Verville
Écrire une feuille de style peut parfois devenir un processus long et compliqué. Le but de la présentation est d'introduire une méthode de travail basée sur le préprocesseur SASS.
La beauté de cette méthode est qu'elle n'est pas liée à un système d'exploitation donné (Windows, Mac ou Linux).
Cette formation peut être utile tant au niveau du/de la graphiste, de l'intégrateur/trice que du/de la programmeur/e. Le/la graphiste y verra une façon de présenter aux programmeurs et intégrateurs ses balises et styles. L'intégrateur/trice pourra travailler plus rapidement et le/la programmeur/e pourra apprécier les capacités de ce préprocesseur à bâtir des canevas de styles ou à comprendre comment modifier des paramètres propres à ses projets. Cette formation pourra également intéresser les chargés de projets dans leur quête du respect du cahier des charges. Pour ceux et celles qui connaissent ou utilisent un préprocesseur, voilà l'occasion de partager votre expérience.
L'objectif ultime est de proposer une méthode de travail commune chez Innobec en matière de feuilles de style CSS en regard de la production et de l'intégration des maquettes. Parler le même langage syntaxique facilitera la tâche de tous.
Alphorm.com Formation Simplifier l’usage du CSS avec LessAlphorm
Les préprocesseurs CSS comme LESS permettent d’optimiser le code et de repousser les limites du CSS, à l’aide de variables, de fonctions et de nouvelles fonctionnalités afin de créer des feuilles de style plus maintenables, versionnables et extensibles.
On démarre cette formation en apprenant à configurer son environnement de travail avec Less. On vous montre comment installer Less avec Node.js.
Au programme, on apprend :
● Les bases du langage avec les variables,
● La syntaxe imbriquée,
● Les outils graphiques basiques,
● Les inclusions,
● Et les mixins pour réutiliser un ensemble de règles CSS
On explique ensuite les techniques avancées du langage Less comme les ruleset, les Guards Mixin, les itérations et avec les boucles.
A l'issue de ce cours vidéo sur le préprocesseur Less, vous maîtrisez les fondamentaux et les techniques avancées de ce nouveau langage de programmation, et vous serez capable de coder des pages web en toute autonomie avec ce préprocesseur CSS.
Au programme, ce que nous allons apprendre :
# Less : les bases du langage
On découvre la syntaxe des langages préprocesseurs, les fonctionnalités et les avantages d’écrire du CSS maintenable et réutilisable comme avec un langage de programmation.
# Installation, usage & outils de compilation
On découvre les différentes options d’installation et les outils pour compiler du Less en CSS. On complète avec un premier exemple d’usage et de compilation.
Nous utiliserons le terminal, le paquet npm less et une application multiplateforme avec une interface graphique riche : Application Koala.
# Les multiples usage des mixins pour créer des combinaisons
● Les mixins avec les parenthèses
● Les mixins avec les paramètres
● Les mixins avec les namespace
● Les guarded mixins
# Travailler avec les fonctions et les modules intégrés de Less
Pour aller plus loin, LESS propose une dizaine de fonctions réutilisables pour changer les nuances, tons et luminosité de couleurs, qui nous serviront pour le projet de création de librairie CSS
+ Projets et travaux pratiques
Il s’agit d’une formation au format didacticiel avec plusieurs projets et travaux pratiques. Un projet plus complet sera l’occasion d’appliquer toutes les notions et de consolider vos connaissances.
À l'issue de cette formation, vous saurez parfaitement gérer et maintenir votre base de code, ce qui est un gage de réussite pour vos projets futurs.
# Projet complet : Créer une librairie CSS
Un projet complet, développé en ReactJS, avec une architecture des feuilles de style en plusieurs modules CSS. Le tout est organisé en plusieurs répertoires et fichiers, lesquels sont compilés en un seul fichier.
Pour ce projet, nous utiliserons les ressources de la librairie Bootstrap 5, qui fournit une large collection de composants HTML et CSS réutilisables avec des classes prédéfinies et des utilitaires.
Présentation sur l'utilisation de SASS/Compass. À la fin de cette présentation vous saurez utiliser un préprocesseur. Le tout est vraiment très simple et tourne autour de quatre concepts.
Le Big Data offre la capacité de traiter des volumes de données conséquents à l’aide d’architectures techniques nouvelles, comment les utilisateurs traditionnels (datamanager, datasteward, dataminers) accèderont et traiteront les données dans ces nouvelles architectures ?
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...VISEO
Il n’existe à ce jour plus une seule application Web qui n’utilise pas « CSS », ces fichiers qui permettent de styliser son application. Aujourd’hui, « CSS3 » nous permet d’écrire des applications du plus en plus attrayantes mais n’est pas encore idéal puisque nous constatons des manques comme par exemple la définition de constantes de couleurs, chose appréciable pour les sites en marque blanche. Notons également la difficulté pour factoriser et maintenir ce code.
Une lueur d’espoir est apparue, grâce à « Less ». C’est un framework qui non seulement nous facilite l’écriture de nos fichiers CSS, mais nous aide également à les maintenir et à mieux les structurer, tout en ayant des outils que nous pouvons utiliser dans nos usines logiciels.
Je suis un développeur Web, et je n’ai pas peur de dire que désormais, j’aime le CSS !
Pensez vos CSS. Ne laissez pas vos collègues et stagiaires trouver ce que vous avez fait, implémenté.
Faites-le bien, faites-le proprement, de façon claire et concise, parce que "yes we can". Après tout, c'est une question de structuration et de documentation, n'est-ce pas ?
De OOCSS à BEM en passant par SMACSS... de nombreuses méthodes existent pour vous y aider !
Conception de thèmes WordPress : construire et optimiser son espace de travailFrédérique Game
-- Conférence WordPress Camp 2016 --
À partir d’un framework comme Genesis et d’un starter theme comme Underscores : apprendre à identifier les éléments importants et organiser ses outils, librairies afin de créer son propre flux de travail. Gagner en productivité pour se concentrer sur l'essentiel et offrir un design efficace et orienté utilisateurs.
Côté front-end : (re) découverte de SASS (et outils dédiés)
Côté développement : utilisation des snippets, mise-en-place de versionning comme Git.
Utiliser un maximum de ressources disponibles depuis WordPress : exemples, les body class, les librairies Jquery présentes etc...
Présentation qui navigue entre l’atelier et le partage d’expérience et d’astuces plutôt à destination des (web)graphistes ou personnes désireuses d’approfondir des notions front-end, cette proposition balaiera les grandes lignes pour nous aider à créer un environnement de travail plus efficace et plus confortable.
Audience ciblée : Designers, Chefs de Projets, Clients
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...Renoir Boulanger
La façon de concevoir des sites Web a beaucoup évolué au cours des deux dernières années. Concevez-vous encore vos sites comme en 2009? Trouvez-vous vos sites lents? Êtes-vous web-responsable? Imaginez si vous étiez capable de gagner du temps. Comment pouvez-vous être certain que votre pigiste, employé ou fournisseur fait un travail de qualité?
Nous allons couvrir des techniques clé qui permettent d'optimiser le travail, comment être plus efficace avec votre équipe technique et savoir jauger le niveau d'expérience.
L’objectif de la séance est de donner des outils pour évaluer le niveau de qualité d’un site; des pistes pour en améliorer la performance et s’assurer de pouvoir en entretenir le code après plusieurs révisions.
Conseils pour Les Jeunes | Conseils de La Vie| Conseil de La JeunesseOscar Smith
Besoin des conseils pour les Jeunes ? Le document suivant est plein des conseils de la Vie ! C’est vraiment un document conseil de la jeunesse que tout jeune devrait consulter.
Voir version video:
➡https://youtu.be/7ED4uTW0x1I
Sur la chaine:👇
👉https://youtube.com/@kbgestiondeprojets
Aimeriez-vous donc…
-réussir quand on est jeune ?
-avoir de meilleurs conseils pour réussir jeune ?
- qu’on vous offre des conseils de la vie ?
Ce document est une ressource qui met en évidence deux obstacles qui empêchent les jeunes de mener une vie épanouie : l'inaction et le pessimisme.
1) Découvrez comment l'inaction, c'est-à-dire le fait de ne pas agir ou d'agir alors qu'on le devrait ou qu'on est censé le faire, est un obstacle à une vie épanouie ;
> Comment l'inaction affecte-t-elle l'avenir du jeune ? Que devraient plutôt faire les jeunes pour se racheter et récupérer ce qui leur appartient ? A découvrir dans le document ;
2) Le pessimisme, c'est douter de tout ! Les jeunes doutent que la génération plus âgée ne soit jamais orientée vers la bonne volonté. Les jeunes se sentent toujours mal à l'aise face à la ruse et la volonté politique de la génération plus âgée ! Cet état de doute extrême empêche les jeunes de découvrir les opportunités offertes par les politiques et les dispositifs en faveur de la jeunesse. Voulez-vous en savoir plus sur ces opportunités que la plupart des jeunes ne découvrent pas à cause de leur pessimisme ? Consultez cette ressource gratuite et profitez-en !
En rapport avec les " conseils pour les jeunes, " cette ressource peut aussi aider les internautes cherchant :
➡les conseils pratiques pour les jeunes
➡conseils pour réussir
➡jeune investisseur conseil
➡comment investir son argent quand on est jeune
➡conseils d'écriture jeunes auteurs
➡conseils pour les jeunes auteurs
➡comment aller vers les jeunes
➡conseil des jeunes citoyens
➡les conseils municipaux des jeunes
➡conseils municipaux des jeunes
➡conseil des jeunes en mairie
➡qui sont les jeunes
➡projet pour les jeunes
➡conseil des jeunes paris
➡infos pour les jeunes
➡conseils pour les jeunes
➡Quels sont les bienfaits de la jeunesse ?
➡Quels sont les 3 qualités de la jeunesse ?
➡Comment gérer les problèmes des adolescents ?
➡les conseils de jeunes
➡guide de conseils de jeunes
Newsletter SPW Agriculture en province du Luxembourg du 12-06-24BenotGeorges3
Les informations et évènements agricoles en province du Luxembourg et en Wallonie susceptibles de vous intéresser et diffusés par le SPW Agriculture, Direction de la Recherche et du Développement, Service extérieur de Libramont.
Le fichier :
Les newsletters : https://agriculture.wallonie.be/home/recherche-developpement/acteurs-du-developpement-et-de-la-vulgarisation/les-services-exterieurs-de-la-direction-de-la-recherche-et-du-developpement/newsletters-des-services-exterieurs-de-la-vulgarisation/newsletters-du-se-de-libramont.html
Bonne lecture et bienvenue aux activités proposées.
#Agriculture #Wallonie #Newsletter #Recherche #Développement #Vulgarisation #Evènement #Information #Formation #Innovation #Législation #PAC #SPW #ServicepublicdeWallonie
Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...M2i Formation
Améliorez l'intégration de vos nouveaux collaborateurs grâce à notre formation flash sur l'onboarding. Découvrez des stratégies éprouvées et des outils pratiques pour transformer l'intégration en une expérience fluide et efficace, et faire de chaque nouvelle recrue un atout pour vos équipes.
Les points abordés lors de la formation :
- Les fondamentaux d'un onboarding réussi
- Les outils et stratégies pour un onboarding efficace
- L'engagement et la culture d'entreprise
- L'onboarding continu et l'amélioration continue
Formation offerte animée à distance avec notre expert Eric Collin
Cycle de Formation Théâtrale 2024 / 2025Billy DEYLORD
Pour la Saison 2024 / 2025, l'association « Le Bateau Ivre » propose un Cycle de formation théâtrale pour particuliers amateurs et professionnels des arts de la scène enfants, adolescents et adultes à l'Espace Saint-Jean de Melun (77). 108 heures de formation, d’octobre 2024 à juin 2025, à travers trois cours hebdomadaires (« Pierrot ou la science de la Scène », « Montage de spectacles », « Le Mime et son Répertoire ») et un stage annuel « Tournez dans un film de cinéma muet ».
3. Hello!
Je m’appelle Thomas et je suis développeur front-end chez
BALTAZARE, une agence digitale spécialisée WordPress !
Retrouvez moi sur Twitter @ThomasBodinFr
3
7. 1. Présentation
Le CSS peut être amusant et facile d’utilisation, mais les feuilles de
style deviennent de plus en plus grandes, complexes et difficiles à
maintenir.
C'est là qu'un préprocesseur peut vous aider.
Sass vous permet d'utiliser des fonctions qui n'existent pas dans
CSS, comme des variables, du nesting, des mixins, des héritages et
d'autres…
Une fois que vous commencez à développer avec SASS, cela
prendra votre fichier SASS pour le compiler et l'enregistrer comme
un fichier CSS normal que vous pouvez utiliser sur votre site web.
7
8. 2. Installation
1. Installer Ruby (uniquement pour Windows)
https://rubyinstaller.org/downloads/
2. Installer SASS
Ecrire dans votre terminal : gem install sass
3. Lancer votre watcher
a. Se rendre à l’aide de votre terminal dans votre dossier
style (cd CHEMIN)
b. Ecrire : sass --watch main.scss:main.css
8
9. 3. Organisation des
fichiers
L’un des avantages va être de pouvoir organiser et séparer son
SASS dans plusieurs fichiers tout en continuant d’appeler toujours
1 seul fichier CSS.
Votre organisation va donc changer dans le répertoire style :
style /
main.css (créé automatiquement par SASS)
main.scss
_accueil.scss
_contact.scss
_header.scss
_footer.scss
9
10. 4. Outils
Le problème de séparer son SASS dans plusieurs fichier c’est que
dans notre navigateur, celui-ci nous affichera jamais le bon fichier
et la bonne ligne puisque nous appelons main.css
Pour résoudre ce problème, nous pouvons utiliser un sourcemap
qui va permettre à votre débugger d’afficher le fichier source et sa
ligne. Ce sourcemap est généré automatiquement avec
l’extension de sublime text pour le SASS.
Il existe un outil en ligne pour vous aider à comprendre comment
fonctionne SASS. Cet outil est un site web : SASS Meister
10
13. 1. Variables
Penser en variables comme moyen de stocker une valeur que
vous réutiliserez plusieurs fois dans votre style.
Vous pouvez stocker toutes les valeurs CSS : couleurs, polices,
taille, media queries,...
SASS utilise le symbole $ pour ses variables (comme le PHP)
13
15. 2. Nesting
En HTML, nous mettons des boîtes dans des boîtes, c’est
l’imbrication dans une logique hiérarchique.
SASS vous permettra d’imbriquer vos sélecteurs CSS d'une
manière qui suit la même hiérarchie visuelle que votre HTML.
C’est ce que l’on appel le Nesting.
Attention de ne pas abuser de cette imbrication sur des sélecteurs
de TAG qui pourraient s’avérer difficile à entretenir et qui est une
mauvaise pratique.
15
17. 3. Partials
Vous pouvez et devez créer plusieurs fichiers SASS qui
contiennent de petits extraits de CSS que vous pouvez inclure
dans un autre fichiers SASS principal. Se sont les partials !
C'est un excellent moyen de modulariser (gérer sous forme de
modules) votre CSS et d'aider à garder les choses plus faciles à
maintenir.
Un fichier partial est simplement un fichier SASS nommé avec un
underscore. L’underscore permet à SASS de savoir que le fichier
n'est qu'un fichier partiel et qu'il ne doit pas générer un fichier
CSS.
Les partials SASS sont utilisées avec la directive @import dans
votre fichier principal.
17
18. 3. Partials
Cela va importer les fichiers :
- "_global.scss" qui est dans le dossier "partage"
- “_accueil.scss” qui est dans le dossier “pages”
- “_blog.scss” qui est dans le dossier “pages”
18
19. 4. Mixins Certaines choses en CSS sont un peu fastidieuses à écrire, surtout
avec CSS3 et les nombreux préfixes de navigateurs.
Une mixin vous permet de créer des groupes de déclarations CSS
que vous souhaitez réutiliser sur votre site. Vous pouvez même
passer des valeurs pour rendre votre mixin plus flexible.
Vous les définissez en utilisant @mixin et vous les intégrez en
utilisant @include
19
21. 5. Extends / Héritage
L'utilisation de @extend vous permet de partager un ensemble de
propriétés CSS d'un sélecteur à l'autre.
Cela aide à garder votre Sass très petit.
21
23. 6. Opérations
Les mathématiques vous manquaient ? Ce n’est plus le cas avec
SASS !
Faire des calculs dans son CSS est très utile. SASS possède une
poignée d'opérateurs mathématiques standard comme +, -, *, / et
%.
23
28. 28
Lancer SASS :
1. Lancer le terminal
2. Ecrire “cd ” (penser à l’espace)
3. Glisser/déposer le dossier “style” dans votre terminal
4. Appuyer sur “Entrer”
5. Copier/Coller la ligne de commande et appuyer sur “entrer” :
sass --watch main.scss:main.css
29. 29
Mon SASS ne se compile pas :
1. Vérifier si il n’y a pas une erreur dans votre terminal
2. Si c’est le cas, regarder ce qui est écrit et rendez-vous dans le fichier qui pose
problème pour corriger l’erreur
3. Une fois l’erreur trouvé, se rendre dans le terminal pour vérifier que c’est OK,
sinon corriger la nouvelle erreur
Cas possible :
Variable utilisé mais non déclaré, import de fichier oublié, faute de frappe,...