Using the 7–1 Sass/SCSS Pattern with Angular 7Aaron VeronesBlockedUnblockFollowFollowingJan 5The 7–1 pattern is a common Sass architecture, and is recommended by the Sass Guidelines Project.
Here’s the basic structure:Hugo Giraudel, Sass Guidelines ProjectTo make the 7–1 pattern work with Angular, a few modifications are needed.
Here’s my take on it.
Enjoy!Creating the Directory StructureHere’s what you get when you create a new Angular app:The first thing I did was create a src/styles directory and remove the src/styles.
scss file:cd src mkdir stylesrm styles.
scssThen I created a main.
scss file in the new styles folder,cd stylestouch main.
scssand updated angular.
json so that it looks for this new file.
The components and pages folders are made redundant by Angular, because Angular generates stylesheets with each of its components.
The vendors folder is also redundant, because external stylesheets (and scripts) should be included in angular.
json.
"styles": [ ".
/node_modules/bootstrap/dist/css/bootstrap.
css", "styles.
css"],"scripts": [ ".
/node_modules/jquery/dist/jquery.
js", ".
/node_modules/bootstrap/dist/js/bootstrap.
js"],I created the remaining folders in the styles directory.
mkdir abstracts base layout themesThen I created a few of the sass partial files I knew I would be usingcd abstractstouch _variables.
scss _functions.
scss _mixins.
scss _placeholders.
scsscd .
/basetouch _reset.
scss _typography.
scsscd .
/layouttouch _grid.
scsscd .
/themestouch _dark.
scssand imported them in main.
scss.
Remember, you can omit the underscore in importsI also added a shame file because I think it’s a great idea.
A shame file is one where you put all the hacks you’re not proud of so that they don’t get lost and ignored.
Having this file will encourage me to be honest about the hacks I write and make it easier for me to monitor my technical debt.
cd .
touch _shame.
scssThe import for the shame file goes at the bottom of main.
scss .
Now my styles directory looks like this:Importing in ComponentsNow when you need to use variables, mixins, or other resources in your styles folder, you can import them in a component:I’m not huge on relative paths, partly because they’re unaesthetic, but mostly because you can’t move your components around without updating your paths.
Instead, I addedsrc/styles to the paths included by the sass preprocessor by modifying angular.
json to include stylePreprocessorOptions .
Now I can include files like this:Thus concludes this afternoon’s adventure.
If you’ve tried a similar thing and want to share what you learned, or if you have any suggestions to improve this architecture, feel free to leave a comment!.