SCSS Partials
#scss #css #web-development #frontend
SCSS Partials
- multiple and separated files
- Can be in different folders
- file name of partials starts with
_e.g,_boilerplate.scsshtml { box-sizing: border-box; font-size: 100%; } *, *::before, *::after { box-sizing: inherit; } body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; background-color: hsl(0,0%, 11%); color: hsl(0,0%,100%) }
BEM Convention
- Good practice to have one partial for each block
- Easier to debug and work on something specific
Importing the partial in the main scss file
- You can also use the entire filename
- You can also forward entire folders
- Folders should contain
_index.scss
@forward 'boilerplate';
@forward 'typography';