Skip to content

Commit

Permalink
Replace less by sass in doc
Browse files Browse the repository at this point in the history
  • Loading branch information
willybrauner committed Feb 7, 2024
1 parent 42715ba commit cdec4e3
Show file tree
Hide file tree
Showing 5 changed files with 11 additions and 25 deletions.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down Expand Up @@ -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
```

Expand Down
1 change: 0 additions & 1 deletion apps/front/.prettierignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
dist
node_modules
src/mixins/mixins.less
index.html
25 changes: 6 additions & 19 deletions apps/front/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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
*/
Expand All @@ -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)
*/
Expand All @@ -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.
Expand Down
4 changes: 2 additions & 2 deletions apps/front/src/libs/dom/convertRemToPx.ts
Original file line number Diff line number Diff line change
@@ -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}
Expand All @@ -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
*/
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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/"
]
},
Expand Down

0 comments on commit cdec4e3

Please sign in to comment.