SASS stands for Syntactically Awesome Style Sheets. It's the most popular CSS preprocessor. It's a dev tool and helps you to write advanced CSS easily. Every SASS code eventually turns into CSS.

Today we are going to talk about SASS 7 - 1 pattern, and we will see how can we use it and what's the advantages of it.

What is the SASS 7 - 1 pattern?

When you create SASS architecture, you are going to have variables, placeholders, mixins, components, etc. So, these folders should be handled and maintained separately. 7 - 1 pattern is 7 folders and 1 file that imports everything.

SASS 7-1 PATTERN architecture

Fallowing structure is common you can use it and change it as per your requirements.

sass/
|
|– base/
|   |– _reset.scss       # Reset/normalize
|   |– _typography.scss  # Typography rules
|   ...                  # Etc…
|
|– components/
|   |– _buttons.scss     # Buttons
|   |– _carousel.scss    # Carousel
|   |– _cover.scss       # Cover
|   |– _dropdown.scss    # Dropdown
|   ...                  # Etc…
|
|– layout/
|   |– _navigation.scss  # Navigation
|   |– _grid.scss        # Grid system
|   |– _header.scss      # Header
|   |– _footer.scss      # Footer
|   |– _sidebar.scss     # Sidebar
|   |– _forms.scss       # Forms
|   ...                  # Etc…
|
|– pages/
|   |– _home.scss        # Home specific styles
|   |– _contact.scss     # Contact specific styles
|   ...                  # Etc…
|
|– themes/
|   |– _theme.scss       # Default theme
|   |– _admin.scss       # Admin theme
|   ...                  # Etc…
|
|– utils/
|   |– _variables.scss   # Sass Variables
|   |– _functions.scss   # Sass Functions
|   |– _mixins.scss      # Sass Mixins
|   |– _helpers.scss     # Class & placeholders helpers
|
|– vendors/
|   |– _bootstrap.scss   # Bootstrap
|   |– _jquery-ui.scss   # jQuery UI
|   ...                  # Etc…
|
|
`– main.scss             # Main Sass file

Usually we have main.scss file and we will import all of the files from here. But in dart sass, we can use @use and @forward functions.

There is no need to create main.scss. You can access all of your files with @use.

If you want to access all of files inside of specific folder, you need to create index.scss file inside of folder that you want to access.

Inside of index.scss , you should write -> @forward '/file-path'

Second step in your scss code, you should write -> @use '/folder-path'

When you enter only folder path, it will look for index.scss file and it will import all files that are index.

You can create a basic Sass 7 - 1 pattern as mentioned above.

For more information visit docs.

Advantages of SASS 7-1 Pattern architecture

• The biggest advantage is that it provides regular operation. You can easily find the parts you are looking for or want to edit.

• There is no need to compile all SASS or SCSS files one by one. When you compile the main file, the main.Sass file, all @imported files are compiled automatically.

• Since a single CSS file will be created at the end of the compilation process, the HTML page only needs to be added once. Since the @import command used in the CSS file will cause each CSS file to be imported with a separate request, the SASS 7-1 method provides advantages in terms of time and cost. Because only one CSS file will be requested.

Join Us

How would you like to become a software engineer without going to college? Archi's academy is an edtech company aiming to bridge the skill gap in technology and coding. Learn basic skills by creating small projects and apply it to the workplace.