Skip to main content

MFE-IT

Développement

Sass Training Course – Structure and Accelerate your CSS Style Sheets

Sass Training Course – Structure and Accelerate your CSS Style Sheets
Guaranteed sessions from 1 enrollee  •  No postponement risk except force majeure  •  60% hands-on
Key information
Duration2 day(s) / 14 h
Price1215 € excl. VAT
FormatDistance learning, On-site at your premises
LevelIntermediate
CertifyingNo
TailoredCustomizable programme

Upcoming sessions

19 Janv. 2027
16 Fév. 2027
9 Mars 2027
6 Avr. 2027
11 Mai 2027

Would you like to schedule this training on a specific date? Contact us by email or via the contact form.

Description of the training: Sass Training Course – Structure and Accelerate your CSS Style Sheets
Would you like to know about upcoming sessions ?

Would you like to schedule this Sass Training Course on a specific date ? Contact us by email or by filling out the contact form.

Contact us .elementor-14330 .elementor-element.elementor-element-21dedaf{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-14330 .elementor-element.elementor-element-21dedaf:not(.elementor-motion-effects-element-type-background), .elementor-14330 .elementor-element.elementor-element-21dedaf > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-14330 .elementor-element.elementor-element-c833b3c .elementor-icon-list-icon i{color:var( --e-global-color-6ecb672 );transition:color 0.3s;}.elementor-14330 .elementor-element.elementor-element-c833b3c .elementor-icon-list-icon svg{fill:var( --e-global-color-6ecb672 );transition:fill 0.3s;}.elementor-14330 .elementor-element.elementor-element-c833b3c{--e-icon-list-icon-size:20px;--icon-vertical-offset:0px;}.elementor-14330 .elementor-element.elementor-element-c833b3c .elementor-icon-list-text{color:var( --e-global-color-7295773 );transition:color 0.3s;}.elementor-14330 .elementor-element.elementor-element-fc848b4{--grid-template-columns:repeat(0, auto);text-align:center;--icon-size:22px;--grid-column-gap:5px;--grid-row-gap:0px;}.elementor-14330 .elementor-element.elementor-element-fc848b4 .elementor-social-icon{background-color:#FF000000;--icon-padding:0em;}.elementor-14330 .elementor-element.elementor-element-fc848b4 .elementor-social-icon:hover i{color:var( --e-global-color-accent );}.elementor-14330 .elementor-element.elementor-element-fc848b4 .elementor-social-icon:hover svg{fill:var( --e-global-color-accent );}.elementor-14330 .elementor-element.elementor-element-4caf259 .menu-item a.hfe-menu-item{padding-left:15px;padding-right:15px;}.elementor-14330 .elementor-element.elementor-element-4caf259 .menu-item a.hfe-sub-menu-item{padding-left:calc( 15px + 20px );padding-right:15px;}.elementor-14330 .elementor-element.elementor-element-4caf259 .hfe-nav-menu__layout-vertical .menu-item ul ul a.hfe-sub-menu-item{padding-left:calc( 15px + 40px );padding-right:15px;}.elementor-14330 .elementor-element.elementor-element-4caf259 .hfe-nav-menu__layout-vertical .menu-item ul ul ul a.hfe-sub-menu-item{padding-left:calc( 15px + 60px );padding-right:15px;}.elementor-14330 .elementor-element.elementor-element-4caf259 .hfe-nav-menu__layout-vertical .menu-item ul ul ul ul a.hfe-sub-menu-item{padding-left:calc( 15px + 80px );padding-right:15px;}.elementor-14330 .elementor-element.elementor-element-4caf259 .menu-item a.hfe-menu-item, .elementor-14330 .elementor-element.elementor-element-4caf259 .menu-item a.hfe-sub-menu-item{padding-top:10px;padding-bottom:10px;}.elementor-14330 .elementor-element.elementor-element-4caf259 ul.sub-menu{width:220px;}.elementor-14330 .elementor-element.elementor-element-4caf259 .sub-menu a.hfe-sub-menu-item, .elementor-14330 .elementor-element.elementor-element-4caf259 nav.hfe-dropdown li a.hfe-menu-item, .elementor-14330 .elementor-element.elementor-element-4caf259 nav.hfe-dropdown li a.hfe-sub-menu-item, .elementor-14330 .elementor-element.elementor-element-4caf259 nav.hfe-dropdown-expandible li a.hfe-menu-item, .elementor-14330 .elementor-element.elementor-element-4caf259 nav.hfe-dropdown-expandible li a.hfe-sub-menu-item{padding-top:15px;padding-bottom:15px;}.elementor-14330 .elementor-element.elementor-element-4caf259 a.hfe-menu-item, .elementor-14330 .elementor-element.elementor-element-4caf259 a.hfe-sub-menu-item{font-family:"Poppins", Sans-serif;font-size:13px;font-weight:400;line-height:13px;}.elementor-14330 .elementor-element.elementor-element-4caf259 .menu-item a.hfe-menu-item, .elementor-14330 .elementor-element.elementor-element-4caf259 .sub-menu a.hfe-sub-menu-item{color:var( --e-global-color-7295773 );}.elementor-14330 .elementor-element.elementor-element-4caf259 .menu-item a.hfe-menu-item:hover, .elementor-14330 .elementor-element.elementor-element-4caf259 .sub-menu a.hfe-sub-menu-item:hover, .elementor-14330 .elementor-element.elementor-element-4caf259 .menu-item.current-menu-item a.hfe-menu-item, .elementor-14330 .elementor-element.elementor-element-4caf259 .menu-item a.hfe-menu-item.highlighted, .elementor-14330 .elementor-element.elementor-element-4caf259 .menu-item a.hfe-menu-item:focus{color:var( --e-global-color-accent );}.elementor-14330 .elementor-element.elementor-element-4caf259 .menu-item.current-menu-item a.hfe-menu-item, .elementor-14330 .elementor-element.elementor-element-4caf259 .menu-item.current-menu-ancestor a.hfe-menu-item{color:var( --e-global-color-accent );}.elementor-14330 .elementor-element.elementor-element-4caf259 .sub-menu, .elementor-14330 .elementor-element.elementor-element-4caf259 nav.hfe-dropdown, .elementor-14330 .elementor-element.elementor-element-4caf259 nav.hfe-dropdown-expandible, .elementor-14330 .elementor-element.elementor-element-4caf259 nav.hfe-dropdown .menu-item a.hfe-menu-item, .elementor-14330 .elementor-element.elementor-element-4caf259 nav.hfe-dropdown .menu-item a.hfe-sub-menu-item{background-color:#fff;}.elementor-14330 .elementor-element.elementor-element-4caf259 .sub-menu li.menu-item:not(:last-child), .elementor-14330 .elementor-element.elementor-element-4caf259 nav.hfe-dropdown li.menu-item:not(:last-child), .elementor-14330 .elementor-element.elementor-element-4caf259 nav.hfe-dropdown-expandible li.menu-item:not(:last-child){border-bottom-style:solid;border-bottom-color:#c4c4c4;border-bottom-width:1px;}
  • contact@mfe-it.com
Menu {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/en/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/hello-elementor/*","/en/*\?(.+)"]}},{"not":{"selector_matches":"a[rel~="nofollow"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} ( () => { const lazyloadRunObserver = () => { const lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` ); const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => { entries.forEach( ( entry ) => { if ( entry.isIntersecting ) { let lazyloadBackground = entry.target; if( lazyloadBackground ) { lazyloadBackground.classList.add( 'e-lazyloaded' ); } lazyloadBackgroundObserver.unobserve( entry.target ); } }); }, { rootMargin: '200px 0px 200px 0px' } ); lazyloadBackgrounds.forEach( ( lazyloadBackground ) => { lazyloadBackgroundObserver.observe( lazyloadBackground ); } ); }; const events = [ 'DOMContentLoaded', 'elementor/lazyload/observe', ]; events.forEach( ( event ) => { document.addEventListener( event, lazyloadRunObserver ); } ); } )(); var elementorFrontendConfig = {"environmentMode":{"edit":false,"wpPreview":false,"isScriptDebug":false},"i18n":{"shareOnFacebook":"Share on Facebook","shareOnX":"Share on X","pinIt":"Pin it","download":"Download","downloadImage":"Download image","fullscreen":"Fullscreen","zoom":"Zoom","share":"Share","playVideo":"Play Video","previous":"Previous","next":"Next","close":"Close","a11yCarouselPrevSlideMessage":"Previous slide","a11yCarouselNextSlideMessage":"Next slide","a11yCarouselFirstSlideMessage":"This is the first slide","a11yCarouselLastSlideMessage":"This is the last slide","a11yCarouselPaginationBulletMessage":"Go to slide"},"is_rtl":false,"breakpoints":{"xs":0,"sm":480,"md":768,"lg":1025,"xl":1440,"xxl":1600},"responsive":{"breakpoints":{"mobile":{"label":"Mobile Portrait","value":767,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"Mobile Landscape","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"Tablet Portrait","value":1024,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"Tablet Landscape","value":1200,"default_value":1200,"direction":"max","is_enabled":false},"laptop":{"label":"Laptop","value":1366,"default_value":1366,"direction":"max","is_enabled":false},"widescreen":{"label":"Widescreen","value":2400,"default_value":2400,"direction":"min","is_enabled":false}},"hasCustomBreakpoints":false},"version":"4.2.3","is_static":false,"experimentalFeatures":{"e_font_icon_svg":true,"additional_custom_breakpoints":true,"container":true,"e_optimized_markup":true,"e_panel_promotions":true,"hello-theme-header-footer":true,"nested-elements":true,"global_classes_should_enforce_capabilities":true,"e_variables":true,"e_opt_in_v4_page":true,"e_components":true,"e_interactions":true,"e_widget_creation":true,"import-export-customization":true},"urls":{"assets":"https://mfe-it.com/wp-content/plugins/elementor/assets/","ajaxurl":"https://mfe-it.com/wp-admin/admin-ajax.php","uploadUrl":"https://mfe-it.com/wp-content/uploads"},"nonces":{"floatingButtonsClickTracking":"7065171412","atomicFormsSendForm":"8eed6fed3a"},"swiperClass":"swiper","settings":{"page":[],"editorPreferences":[]},"kit":{"active_breakpoints":["viewport_mobile","viewport_tablet"],"global_image_lightbox":"yes","lightbox_enable_counter":"yes","lightbox_enable_fullscreen":"yes","lightbox_enable_zoom":"yes","lightbox_enable_share":"yes","lightbox_title_src":"title","lightbox_description_src":"description","hello_header_logo_type":"title","hello_header_menu_layout":"horizontal","hello_footer_logo_type":"logo"},"post":{"id":19879,"title":"Sass%20Training%20Course%20%E2%80%93%202%20days%2C%20IT%20training%20%7C%20MFE-IT","excerpt":"","featuredImage":"https://mfe-it.com/wp-content/uploads/2026/08/sass-3-1785666369609-1024x576.webp"}}; //# sourceURL=elementor-frontend-js-before

This website only uses cookies that are strictly necessary for it to work. No advertising or audience-measurement trackers are set.

Got it#mfe-cookie-notice{position:fixed;left:0;right:0;bottom:0;z-index:99990;background:#fff;border-top:3px solid #07689F;box-shadow:0 -4px 20px rgba(16,42,67,.15)}#mfe-cookie-notice .mfe-cn-inner{max-width:1180px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}#mfe-cookie-notice .mfe-cn-text{margin:0;flex:1;min-width:240px;font-size:14px;color:#16232e;line-height:1.5}#mfe-cookie-notice .mfe-cn-link{color:#07689F;font-weight:700;text-decoration:underline}#mfe-cookie-notice .mfe-cn-ok{flex:0 0 auto;background:#07689F;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:700;cursor:pointer;min-height:44px;min-width:44px}#mfe-cookie-notice .mfe-cn-ok:hover{background:#04547f}@media(max-width:600px){#mfe-cookie-notice .mfe-cn-ok{width:100%}}(function(){var n=document.getElementById("mfe-cookie-notice");if(!n)return;function has(k){return document.cookie.split(";").some(function(c){return c.trim().indexOf(k+"=")===0;});}if(!has("mfe_cookie_notice")){n.hidden=false;}var b=document.getElementById("mfe-cn-ok");if(b){b.addEventListener("click",function(){var d=new Date(Date.now()+15552000000).toUTCString();document.cookie="mfe_cookie_notice=1; expires="+d+"; path=/; SameSite=Lax";n.hidden=true;});}})();📝 Request a quote📞 Be called back💬A question?#mfe-fab{position:fixed;right:20px;bottom:20px;z-index:99980;display:flex;flex-direction:column;align-items:flex-end;gap:10px}#mfe-fab .mfe-fab-btn{display:inline-flex;align-items:center;gap:8px;background:#FF7E67;color:#fff;border:none;border-radius:999px;padding:12px 20px;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 8px 22px rgba(255,126,103,.45);min-height:48px}#mfe-fab .mfe-fab-btn:hover{background:#f4634a}#mfe-fab .mfe-fab-ico{font-size:18px;line-height:1}#mfe-fab .mfe-fab-menu{flex-direction:column;gap:8px;background:#fff;border:1px solid #e6edf3;border-radius:14px;padding:10px;box-shadow:0 12px 30px rgba(16,42,67,.18);min-width:230px}#mfe-fab .mfe-fab-item{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;color:#16232e;text-decoration:none;font-size:14px;font-weight:600;min-height:44px}#mfe-fab .mfe-fab-item:hover{background:#fff4f0;color:#07689F}#mfe-fab[data-open="1"] .mfe-fab-menu{display:flex}#mfe-fab[data-open="0"] .mfe-fab-menu{display:none}@media(max-width:600px){#mfe-fab{right:14px;bottom:14px}#mfe-fab .mfe-fab-label{display:none}#mfe-fab .mfe-fab-btn{padding:14px;border-radius:50%;min-width:56px;justify-content:center}}(function(){var fab=document.getElementById("mfe-fab");if(!fab)return;var btn=document.getElementById("mfe-fab-btn"),menu=document.getElementById("mfe-fab-menu");function op(o){fab.setAttribute("data-open",o?"1":"0");btn.setAttribute("aria-expanded",o?"true":"false");menu.hidden=!o;if(o){var a=menu.querySelector("a");if(a)a.focus();}}btn.addEventListener("click",function(e){e.stopPropagation();op(fab.getAttribute("data-open")!=="1");});document.addEventListener("click",function(e){if(!fab.contains(e.target))op(false);});document.addEventListener("keydown",function(e){if(e.key==="Escape"){op(false);btn.focus();}});function lift(){var n=document.getElementById("mfe-cookie-notice");var b=20;if(n&&!n.hidden){var hh=n.getBoundingClientRect().height;b=Math.min(hh+16,240);}fab.style.bottom=b+"px";}lift();window.addEventListener("resize",lift);setTimeout(lift,600);})();(function(){try{var L=document.querySelectorAll("a[target="_blank"]");for(var i=0;i<L.length;i++){var a=L[i];var r=(a.getAttribute("rel")||"").toLowerCase();if(r.indexOf("noopener")<0)r+=" noopener";if(r.indexOf("noreferrer")<0)r+=" noreferrer";a.setAttribute("rel",r.trim());}}catch(e){}})(); (function(){ var P='1.618 / 1'; function a(im){ if(!im || im.dataset.goldenImg) return; if(im.closest('header,footer,.elementor-location-header,.elementor-location-footer,#wpadminbar,nav,.elementor-widget-theme-site-logo,.site-logo')) return; var w=im.naturalWidth, h=im.naturalHeight; if(!w||!h) return; if(w/h < 1.4){ im.dataset.goldenImg='skip'; return; } im.style.setProperty('aspect-ratio', P, 'important'); im.style.setProperty('object-fit','cover','important'); im.style.setProperty('height','auto','important'); im.dataset.goldenImg='1'; } function s(){ document.querySelectorAll('img').forEach(function(im){ if(im.complete && im.naturalWidth) a(im); else im.addEventListener('load', function(){a(im);}, {once:true}); }); } if(document.readyState!=='loading') s(); else document.addEventListener('DOMContentLoaded', s); window.addEventListener('load', s); var t=false; function sch(){ if(t) return; t=true; setTimeout(function(){ t=false; s(); }, 300); } try{ new MutationObserver(sch).observe(document.documentElement,{childList:true,subtree:true}); }catch(e){} })(); (function() { 'use strict'; var parentSelector = '.menu-item.wpml-ls-current-language.menu-item-has-children'; function toggleSubmenu(link, forceClose) { var isExpanded = link.getAttribute('aria-expanded') === 'true'; if (forceClose || isExpanded) { link.setAttribute('aria-expanded', 'false'); } else { link.setAttribute('aria-expanded', 'true'); } } function handleKeydown(e) { var key = e.key || e.keyCode; if (key === 'Enter' || key === ' ' || key === 13 || key === 32) { e.preventDefault(); toggleSubmenu(this); } else if (key === 'Escape' || key === 'Esc' || key === 27) { if (this.getAttribute('aria-expanded') === 'true') { e.preventDefault(); toggleSubmenu(this, true); } } } function handleBlur(e) { var link = this; var parent = link.closest(parentSelector); if (!parent) return; setTimeout(function() { if (!parent.contains(document.activeElement)) { toggleSubmenu(link, true); } }, 100); } function init() { var parents = document.querySelectorAll(parentSelector); for (var i = 0; i < parents.length; i++) { var link = parents[i].querySelector('a[aria-expanded]'); if (link) { link.addEventListener('keydown', handleKeydown); link.addEventListener('blur', handleBlur); } } } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } })();
Good to know
GOOD TO KNOW

This training course includes numerous exercises (60% practical) to enhance learning. Each session will take place even if only one person is registered (except in cases of force majeure). A preliminary interview is held between the participant and/or a company representative in order to fully assess the participant’s profile (level, needs, professional context, challenges, etc.).
Assessment : during the training course, the trainer assesses the participants’ progress through multiple-choice questions, role-playing exercises and practical work. Participants receive a certificate of completion at the end of the training course.

This training course is part of our Development Training Courses. Explore our other development trainings to design modern, performant and maintainable applications.

Objectives of the training: Sass Training Course – Structure and Accelerate your CSS Style Sheets
objectives of this Sass Training Course

By the end, each participant will be able to :

  • Understanding how Sass works and its benefits
  • Using variables, mixins, functions, and conditions
  • Structuring CSS code into reusable modules
  • Applying conventions (BEM, 7–1 architecture, etc.)
  • Compiling and automating Sass in a modern project
  • Managing a real project with a maintainable styling system
Prerequisites of the training: Sass Training Course – Structure and Accelerate your CSS Style Sheets
Prerequisites
  • Basic knowledge of HTML and CSS
  • No knowledge of JavaScript or frontend tools required
  • Local development environment (VS Code, Node.js or web IDE)
  • Because each participant has a unique background and expectations, a preliminary interview with our expert allows us to precisely identify their objectives, level and professional challenges.
    This enables us to tailor the training content to ensure relevant and personalised learning.
Target audience of the training: Sass Training Course – Structure and Accelerate your CSS Style Sheets
Target Audience

Integrators, front-end developers, web designers

Detailed programme of the training: Sass Training Course – Structure and Accelerate your CSS Style Sheets

Download the programme (PDF)

Introduction to Sass and its Benefits
  • Why Sass? Differences with CSS and key features.
  • Project context and installation via CLI or build tool.
  • First.scss file and compilation workflow.
Variables, Nesting and Inheritance
  • Declaring and using variables for colours, spacing and typography.
  • Nesting selectors and CSS operators.
  • @extend directive and rule reuse.
Mixins, Functions and Conditional Logic
  • Creating parameterised mixins for repeatable patterns.
  • Custom functions for calculations and transformations.
  • Control flow with @if, @for and @each loops.
Compilation and Project Integration
  • Partials architecture (_base.scss, _layout.scss) and modular files.
  • Imports with @use and @forward.
  • 7-1 architecture for scalable projects.
Tooling and Build Pipeline
  • Manual and automatic compilation, watcher mode.
  • Dart Sass and modern Sass implementations.
  • Integration with Webpack, Vite and modern bundlers.
Best Practices and Final Project
  • Naming conventions and BEM methodology.
  • Building a modular design system with Sass.
  • Final mini-site project with a complete Sass design system.
The advantages of this training course
  • Goes beyond Sass syntax and teaches modern CSS code structure
  • Is project-oriented and focused on professional best practices (naming, organisation, scalability)
  • Suits freelancers, integrators, UI teams and web developers in retraining
  • Integrates current tooling (CLI, build tools, modular architecture)
FAQ
What is Sass?

Sass (Syntactically Awesome Stylesheets) is a CSS preprocessor that adds features such as variables, nesting, mixins, functions and modularization. It compiles to standard CSS executed by the browser. Sass is used to structure and maintain complex stylesheets. MFE-IT trains front-end integrators and developers to use it efficiently.

What is the difference between Sass, SCSS and modern CSS?

Sass offers two syntaxes: the historical indented syntax (.sass) and SCSS (Sassy CSS,.scss), closer to CSS and widely adopted. Modern CSS now includes native CSS variables and nesting, but Sass remains more powerful for mixins, functions and modularization. MFE-IT positions these choices according to your needs.

How do you structure a maintainable Sass project?

We favor the 7-1 architecture (abstracts, base, components, layout, pages, themes, vendors + a main.scss), factor code via mixins and placeholders (@extend), limit nesting to 3 levels, and use @use / @forward for modularity. The MFE-IT training covers these best practices.

How long is the Sass training at MFE-IT?

The training lasts 2 days (14 hours), remote or on-site, with a maximum of 3 participants per session and 30 days of post-training support included.