Sass 7-1 Pattern

sass-7-1-pattern.scss

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

Source: http://sass-guidelin.es/#the-7-1-pattern

Thanks to Almighty God!
Where the Abstracts Folder

+1 @devabdulbarik ;-)

@devabdulbarik
The utils here represents the abstract. Both practically have the same expected content.

I'm having a hard time understanding "themes". Does anybody have further reading?

@grepsedawk
themes folder is used whenever a site has multiple themes. For instance, the example project above includes both admin and default themes. We can, therefore, assume this example site is styled entirely differently for logged-in admins. Perhaps to better present and accommodate the additional features an Admin has. Some websites also offer a "night mode", where the background of the site is darker with lighter-colored text for easier reading in low-light environments. An option like this would be represented in its own theme file too.
Source: https://www.learnhowtoprogram.com/user-interfaces/building-layouts-preprocessors/7-1-sass-architecture

How would you swap between 2 themes @DenisBun?

@grepsedawk
I would recommend you using css variables scoped in a class at the body tag.
You could use any kind of switch (e.g. a checkbox) with an event handler that toggles this theme class.

Thanks for the insight @chlorophyllkid. I was thinking something similar, I just didn't know if there was a "magic" way to swap.

Thanks you my friend.

Create a file called script.sh in your ./sass folder and paste this code.

mkdir abstract pages layout base components 
cd abstract
touch _function.scss _mixins.scss _variables.scss
cd .. 
cd base 
touch _animations.scss _typography.scss _utilities.scss _base.scss
# This is a comment
# Use below imports in your main inde.scss file
# @import "./abstract/variables";
# @import "./layout/header";
# @import "./base/animations";
# @import "./base/typography";
# @import "./components/button";

Navigate to ./sass folder and double click on this file (script.sh)
It will automatically create some of the folder and files for you. 😁
I'll update this script as I create more files for myself 😛

What is the difference between layout/ and component/ in the context of react/vue applications? A navigation file is both a component and layout at the same time.

Is there any distinction?

A component would be something like a "button" where layout would be like "the CSS grid that lives inside "

great :)

This is great! Do you plan on updating it to follow the latest Sass Modules release? Instead of @import using @use and @forward.

I like the idea of this but the Sass docs suggest moving away from @import and toward @use. Find practical organizational guidelines using @use and @forward seems to be difficult. Good read none-the-less.

I like the idea of this but the Sass docs suggest moving away from @import and toward @use. Find practical organizational guidelines using @use and @forward seems to be difficult. Good read none-the-less.

fyi: nonetheless is one word

Source: http://sass-guidelin.es/#the-7-1-pattern

I think that utils is the equivalent abstract

thank you, this is great i will use

Thanks, that's perfect!