diff --git a/README.md b/README.md
index f701ba8..ad602e7 100644
--- a/README.md
+++ b/README.md
@@ -30,7 +30,7 @@ Each app has his own `package.json` and `node_modules` folder, we build them sep
 
 ### Front app
 
-The front app is a React static-site generator build with [vite](https://vitejs.dev/), [react](https://reactjs.org/),[typescript](https://www.typescriptlang.org/), and [less](https://lesscss.org/), in order to obtain a static server rendering for best performance. The build step prepare a server script, a prerender script and a SPA version to leave choice of use. This one embeds [@cher-ami/router](https://github.com/cher-ami/router) to manage server static props, routes transitions and languages.
+The front app is a React static-site generator build with [vite](https://vitejs.dev/), [react](https://reactjs.org/),[typescript](https://www.typescriptlang.org/), and [sass](https://sass-lang.com/), in order to obtain a static server rendering for best performance. The build step prepare a server script, a prerender script and a SPA version to leave choice of use. This one embeds [@cher-ami/router](https://github.com/cher-ami/router) to manage server static props, routes transitions and languages.
 
 See the [front app documentation](apps/front/README.md)
 
@@ -124,7 +124,7 @@ Scaffold a new React component called `MyButton` in [apps/front/src/components](
        └── src
             └── components
                   └── myButton
-                         |── MyButton.module.less
+                         |── MyButton.module.scss
                          └── MyButton.tsx
 ```
 
diff --git a/apps/front/.prettierignore b/apps/front/.prettierignore
index aa08923..ad4ca7f 100644
--- a/apps/front/.prettierignore
+++ b/apps/front/.prettierignore
@@ -1,4 +1,3 @@
 dist
 node_modules
-src/mixins/mixins.less
 index.html
diff --git a/apps/front/README.md b/apps/front/README.md
index 2519598..60402f5 100644
--- a/apps/front/README.md
+++ b/apps/front/README.md
@@ -11,7 +11,7 @@
 
 ## About
 
-This front app is a React static-site generator build in order to obtain a static server rendering for best performance. It run with [vite](https://vitejs.dev/), [react](https://reactjs.org/),[typescript](https://www.typescriptlang.org/), and [less](https://lesscss.org/). The build step prepare a server script, a prerender script and a SPA version to leave choice of use. This one embeds [@cher-ami/router](https://github.com/cher-ami/router) to manage server static props, routes transitions and languages.
+This front app is a React static-site generator build in order to obtain a static server rendering for best performance. It run with [vite](https://vitejs.dev/), [react](https://reactjs.org/),[typescript](https://www.typescriptlang.org/), and [scss](https://sass-lang.com/). The build step prepare a server script, a prerender script and a SPA version to leave choice of use. This one embeds [@cher-ami/router](https://github.com/cher-ami/router) to manage server static props, routes transitions and languages.
 
 ## Entry points
 
@@ -180,15 +180,15 @@ When you run `npm run dev`, you should see the app running on https://localhost:
 
 ### CSS workflow
 
-[Less](http://lesscss.org/) is used as css preprocessor. It can be set as `.less` file or `.module.less` for css module;
+[sass](https://sass-lang.com) is used as css preprocessor. It can be set as `.less` file or `.module.less` for css module;
 Both works by default.
 
 [BEM methodology](http://getbem.com) is used to organize the integration of our templates and components
 but have some differences depend on the use-case:
 
-### <a name="BemForModuleLess"></a>BEM for `.module.less`
+### <a name="BemForModuleScss"></a>BEM for `.module.scss`
 
-```less
+```scss
 /**
  * BEM block is always "root" className
  */
@@ -207,9 +207,9 @@ but have some differences depend on the use-case:
 }
 ```
 
-### <a name="BemForLess"></a>BEM for `.less`
+### <a name="BemForLess"></a>BEM for `.scss`
 
-```less
+```scss
 /**
  * BEM block (.PascalCase)
  */
@@ -230,19 +230,6 @@ but have some differences depend on the use-case:
 }
 ```
 
-### Less Mixins
-
-In order to export fonts, variables and mixins to each style files, each `.module.less` and `.less`
-files contains as reference the same file:
-
-```less
-@import (reference) "src/references.less";
-```
-
-This file import "as reference" variables and mixins files who come from
-[src/fonts](src/fonts), [src/atoms](src/atoms) and [src/mixins](src/mixins). If a new mixin file is create,
-it will be added in [src/references](src/references).
-
 ## Credits
 
 Developed by [cher-ami](https://github.com/cher-ami) team.
diff --git a/apps/front/src/libs/dom/convertRemToPx.ts b/apps/front/src/libs/dom/convertRemToPx.ts
index 21a56ba..fad3397 100644
--- a/apps/front/src/libs/dom/convertRemToPx.ts
+++ b/apps/front/src/libs/dom/convertRemToPx.ts
@@ -1,6 +1,6 @@
 /**
  * @name convertRemToPx
- * @description Convert px from Rem from CSS variable calculated in the ratio.less file
+ * @description Convert px from Rem from CSS variable calculated in the _ratio.scss file
  * Usefully to get the same value in px that the value we put in rem in our CSS
  * @param {number} pxValue
  * @returns {number}
@@ -14,7 +14,7 @@ export const convertRemToPx = (pxValue: number): number => {
 
 /**
  * @name _convertFontSizeCssVarToPx
- * @description Convert the font size variable, calculated in the ratio.less file to px
+ * @description Convert the font size variable, calculated in the _ratio.scss file to px
  * @param cssUnitValue
  * @returns
  */
diff --git a/package.json b/package.json
index 7fac744..7c434ba 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "chalk": "^5.3.0"
   },
   "lint-staged": {
-    "apps/front/**/*.{tsx,ts,jsx,js,less,css,json,md}": [
+    "apps/front/**/*.{tsx,ts,jsx,js,scss,css,json,md}": [
       "npx prettier --write ./apps/front/"
     ]
   },