[{"data":1,"prerenderedAt":46},["ShallowReactive",2],{"course-css-avance-et-architecture-de-styles-avec-less-et-sass":3,"highlight-scss-$primary-color: #CF6":45},{"id":4,"name":5,"slug":6,"location":7,"targetAudienceFormatMarkdown":8,"prerequisitesFormatMarkdown":9,"objectivesFormatMarkdown":10,"descriptionFormatMarkdown":11,"teachingMethodsFormatMarkdown":12,"teachingResourcesFormatMarkdown":13,"evaluationMethodsFormatMarkdown":14,"accessibilityFormatMarkdown":15,"accessMethodsFormatMarkdown":16,"minimumParticipants":17,"maximumParticipants":17,"duration":18,"reference":19,"trainerType":7,"updated_at":20,"created_at":21,"price":22,"organizationMode":7,"theme":23,"code":27,"tags":32,"metadata":36},"/api/courses/e45f2d95-fec1-41f2-85c7-228975d53fd0","CSS avancé et architecture de styles avec Less et Sass ","css-avance-et-architecture-de-styles-avec-less-et-sass",null,"Développeurs front‑end souhaitant approfondir leur maîtrise du CSS moderne \n\nIntégrateurs Web impliqués dans des projets complexes et responsives \n\nDesigners techniques et intégrateurs désireux de structurer des styles maintenables","-   Solides connaissances en HTML et CSS basique \n-   Maîtrise des sélecteurs, boîtes, positionnements et propriétés fondamentales en CSS \n-   Aisance avec un éditeur de code et les outils du navigateur pour inspecter les styles ","-   Exploiter des techniques avancées de CSS pour des interfaces riches et adaptatives \n-   Concevoir des mises en page complexes avec Flexbox, CSS Grid et media queries \n-   Utiliser des préprocesseurs CSS (Less et Sass) pour structurer, modulariser et optimiser les feuilles de styles \n-   Intégrer des méthodologies de styles maintenables (variables, mixins, fonctions) \n-   Mettre en place des architectures de CSS évolutives tout en garantissant un responsive design performant ","--day1--\n\n## Concepts avancés de CSS et Responsive Design \n\n-   Rappels et approfondissements des fondamentaux CSS \n-   Flexbox : principes, alignements, distribution d’espace \n-   Media queries pour des designs adaptatifs et contextuels \n-   Réactivité et breakpoints : stratégies de conception mobile‑first \n-   Atelier pratique : créer des layouts adaptatifs avec Flexbox \n\n--break--\n\n## CSS Grid pour mise en page moderne \n\n-   Introduction à CSS Grid : concepts et terminologie \n-   Définition de grilles, lignes, zones et pistes\n-   Conversion de maquettes en grilles CSS \n-   Utiliser Grid pour des mises en page complexes \n-   Exercices guidés : implémenter des designs multi-colonnes avec CSS Grid \n\n--day2--\n\n## Préprocesseurs CSS – Less \n\n-   Introduction à Less : installation, syntaxe et compilation \n-   Variables, imbrication et fonctions de base \n-   Mixins et conditions pour styles dynamiques \n-   Organisation de fichiers Less pour des projets structurés \n-   Mise en pratique : modularisation de styles avec Less \n\n--break--\n\n## Préprocesseurs CSS – Sass \n\n-   Introduction à Sass (SCSS) et comparaison avec Less \n-   Variables, partials, mixins, extends \n-   Fonctions, boucles et structures de contrôle avancées \n-   Workflow de compilation avec Sass (Outils CLI, npm, intégration au build) \n-   Exercices pratiques : transformations de styles CSS en Sass avec composants réutilisables \n\n--day3--\n\n## Techniques avancées et méthodologies \n\n-   Approches architecturales de styles (BEM, OOCSS, ITCSS) \n-   Gestion des thèmes, variables globales et héritage de styles \n-   Scoping, isolation des composants et style encapsulated \n-   Optimisation des feuilles de style pour la performance \n-   Atelier : structuration complète d’un système de styles selon une méthodologie donnée \n\n--break--\n\n## Projet intégré et bonnes pratiques \n\n-   Développement d’une page ou d’un mini-site intégrant Flexbox, Grid, responsive et préprocesseur \n-   Tests d’affichage sur différents écrans et navigateurs \n-   Outils d’analyse de performance CSS (audit, coverage) \n-   Bonnes pratiques de maintenance et évolutivité des styles \n-   Synthèse des acquis, retours d’expérience et pistes pour approfondir","Nos formations, équilibrées entre théorie (50%) et pratique (50%), offrent un apprentissage interactif grâce à des méthodes variées comme les travaux pratiques, les mises en situation et les démonstrations. Des QCM réguliers assurent le suivi des acquis.\n\nVariables suivant les formations, les moyens techniques mis en oeuvre sont :\n\nOrdinateurs Mac ou PC, connexion internet fibre, tableau blanc ou écran (pour le distanciel).\n\nEn cas de formation intra sur site externe à Le Code, le client s'assure et s'engage également à avoir toutes les ressources matérielles pédagogiques nécessaires\n\n(équipements informatiques...) au bon déroulement de l'action de formation visée conformément aux prérequis indiqués dans le programme de formation communiqué","Les supports pédagogiques sont remis aux stagiaires sous format numérique et/ou papier selon les modalités de la formation.\n\n  \n\nIls comprennent des supports de cours, des présentations, des fiches pratiques, des études de cas, des exercices applicatifs ainsi que des QCM d’entraînement selon la formation. (adapté au choix du formateur)\n\n  \n\nLes formations s’appuient sur des moyens techniques adaptés : ordinateurs, logiciels professionnels, connexion internet, écran ou vidéoprojecteur, ainsi que des outils collaboratifs et de visioconférence pour les formations à distance.\n\n  \n\nL’ensemble des supports pédagogiques est accessible pendant et après la formation afin de favoriser l’appropriation et la mise en pratique des compétences acquises.","En amont de la formation, un recueil des besoins permet de récolter des informations sur le stagiaire et ses attentes. L’évaluation se fait en cours de formation, par des études de cas ou des travaux pratiques. En fin de formation, par un questionnaire d’auto-évaluation et/ou un examen.\n\nUn suivi de qualité est effectué grâce à nos sessions en groupe restreint (entre 2 et 9 participants maximum). Le stagiaire émargera par demi-journée et recevra une attestation de formation.","Nous informons l'ensemble de nos clients et stagiaires que nous sommes dans la capacité d’adapter les sessions selon les handicaps et les situations spécifiques. Nous nous engageons à répondre à toutes vos demandes sous un délai de 48h\n\nouvré.","Si l’une de nos formations vous intéresse, contactez-nous au +33 4 93 65 34 24 ou à l’adresse mail contact@m2g-intellect.fr. Selon votre besoin et vos attentes, nous organiserons un échange téléphonique avec le formateur pressenti afin d’adapter la\n\nformation et ses modules, puis nous vous adresserons un devis.\n\nLes dates de la formation seront à convenir sous 30 jours maximum.",0,"21.00","css av","2026-04-23T09:33:45+00:00","2026-04-23T09:30:44+00:00","1800.00",{"id":24,"name":25,"slug":26},"/api/themes/abd712b8-6a6c-4c9b-b382-0aea1eac47d6","Développement Web Frontend","developpement-web-frontend",{"id":28,"label":29,"domain":30},"/api/training_specialities/163","326 - Informatique, traitement de l’information, réseaux de transmission des données",{"label":31},"32 - Communication et information",[33],{"id":34,"name":35},"7732139d-6025-4fde-b145-39298ced3408","MENUFEATURED",{"desc-accroche":37,"Description":38,"icon-color":39,"icon-name":40,"code-langage":41,"code-snippet":42,"courte-description":43,"titre-accroche":44},"Devenez expert en stylisation moderne en maîtrisant les préprocesseurs Sass et Less, les méthodologies d'organisation (BEM, 7-1 pattern) et les fonctionnalités CSS avancées pour bâtir des architectures de styles maintenables et scalables.","Cette formation est conçue pour les développeurs front-end qui souhaitent transformer leurs feuilles de styles en véritables architectures logicielles. Au-delà de la simple mise en forme, vous apprendrez à utiliser la puissance des préprocesseurs Sass et Less pour introduire de la logique dans votre design : variables, mixins complexes, héritage et fonctions mathématiques. Nous mettrons un accent particulier sur l'organisation du code à grande échelle via des patterns reconnus (méthodologie BEM, architecture 7-1), garantissant ainsi la modularité et la pérennité de vos projets. Vous explorerez également les fonctionnalités avancées du CSS moderne, comme les Custom Properties et les fonctions de calcul dynamiques, pour créer des systèmes de design robustes et performants.","#CF649A","mdi:sass","scss","$primary-color: #CF649A;\n\n@mixin flex-center {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n}\n\n.card-container {\n\t@include flex-center;\n\tbackground-color: lighten($primary-color, 20%);\n\t\n\t&__item {\n\t\tpadding: 1rem;\n\t\tborder: 1px solid $primary-color;\n\t}\n}","Maîtrisez les préprocesseurs Sass/Less et les méthodologies d'architecture (BEM, 7-1) pour concevoir des systèmes CSS professionnels, modulaires et faciles à maintenir.","Poussez le CSS dans ses derniers retranchements : apprenez à structurer, industrialiser et optimiser vos systèmes de design avec les préprocesseurs.","\u003Cpre class=\"hljs\">\u003Ccode class=\"language-scss\">\u003Cspan class=\"hljs-variable\">$primary-color\u003C/span>: \u003Cspan class=\"hljs-number\">#CF649A\u003C/span>;\n\n\u003Cspan class=\"hljs-keyword\">@mixin\u003C/span> flex-center {\n\t\u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n\t\u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: center;\n\t\u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.card-container\u003C/span> {\n\t\u003Cspan class=\"hljs-keyword\">@include\u003C/span> flex-center;\n\t\u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">lighten\u003C/span>(\u003Cspan class=\"hljs-variable\">$primary-color\u003C/span>, \u003Cspan class=\"hljs-number\">20%\u003C/span>);\n\t\n\t&__item {\n\t\t\u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n\t\t\u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-variable\">$primary-color\u003C/span>;\n\t}\n}\u003C/code>\u003C/pre>",1781121856897]