Using the 7–1 Sass/SCSS Pattern with Angular 7
The 7–1 pattern is a common Sass architecture, and is recommended by the Sass Guidelines Project. Here’s the basic structure:
To make the 7–1 pattern work with Angular, a few modifications are needed. Here’s my take on it. Enjoy!
Creating the Directory Structure
Here’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
Then I created a
main.scss file in the new
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
I created the remaining folders in the styles directory.
mkdir abstracts base layout themes
Then I created a few of the sass partial files I knew I would be using
touch _variables.scss _functions.scss _mixins.scss _placeholders.scss
touch _reset.scss _typography.scss
and imported them in main.scss.
I 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.
The import for the shame file goes at the bottom of main.scss .
Now my styles directory looks like this:
Importing in Components
Now 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 added
src/styles to the paths included by the sass preprocessor by modifying
angular.json to include
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!