Using the 7–1 Sass/SCSS Pattern with Angular 7

Jan 6 · 3 min read

The 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 Project

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 src/styles.scss file:

cd src 
mkdir styles
rm styles.scss

Then I created a main.scss file in the new styles folder,

cd styles
touch main.scss

and 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 themes

Then I created a few of the sass partial files I knew I would be using

cd abstracts
touch _variables.scss _functions.scss _mixins.scss _placeholders.scss
cd ../base
touch _reset.scss _typography.scss
cd ../layout
touch _grid.scss
cd ../themes
touch _dark.scss

and imported them in main.scss.

Remember, you can omit the underscore in imports

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.

cd ..
touch _shame.scss

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 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!

Aaron Verones

Written by

Full-Stack Developer with a love for human/machine cognition. Proud member of the Linux Master Race. https://aaronverones.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade