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:
-### BEM for `.module.less`
+### 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:
}
```
-### BEM for `.less`
+### 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/"
]
},