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 this idea, but the Sass docs suggest moving away from @import and toward @use. Finding practical organizational guidelines using @use and @forward seems complicated. A good read nonetheless.

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!

Thanks a lot !

Here's the setup that I'm currently using for a project. Ignore the custom-partials folder, it is not part of the 7-1, I use it for writing temporary stuff which in most cases will eventually be moved to one of the other folders

This is implemented using the new @forward and @use module system, each folder contains an _index.scss file used to forward the refs to individual files in that folder. Below is the _index.scss file for the components folder, the other folders' index files are similar

@forward './checkbox-toggle';
@forward './flex-text';

CC: @carolyn01 , @HowdyMcGee hope this helps

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 😛

Thanks for the code @abhagsain

For those interested I made a similar batch version

1. Open your favourite text editor
2. Paste the code below
3. Save it as .bat
4. Copy/paste it and launch it wherever you need to

@ECHO OFF 
:: This batch file creates all necessary files for SASS
:: Inspired by @abhagsain https://gist.github.com/abhagsain 
:: https://gist.github.com/rveitch/84cea9650092119527bc#gistcomment-3040049

TITLE SASS Automatic Setup

ECHO ==========================
ECHO SASS AUTOMATIC SETUP
ECHO ============================
ECHO/
ECHO This program automatically creates all the files and folders you need for your SASS project.
ECHO/
PAUSE
ECHO Please wait... Creating files and folders

ECHO/
:: SASS Folder
ECHO Creating SASS folder...
if exist sass\NUL echo - SASS folder already exists
if not exist sass\NUL (
    mkdir sass
    echo + SASS folder creation: done.
)

ECHO/
ECHO Moving to SASS folder
cd sass
ECHO Creating SASS Subfolders...

ECHO/
:: Abstract folder
if exist abstract echo - abstract folder already exists
if not exist abstract (
    mkdir abstract
    echo + Abstract folder creation: Done.
)
:: Pages folder
if exist pages echo - pages folder already exists
if not exist pages (
    mkdir pages
    echo + Pages folder creation: Done.
)
:: Layout folder
if exist layout echo - layout folder already exists
if not exist layout (
    mkdir layout
    echo + Layout folder creation: Done.
)
:: Base folder
if exist base echo - base folder already exists
if not exist base (
    mkdir base
    echo + Base folder creation: Done.
)
:: Components folder
if exist components echo - components folder already exists
if not exist components (
    mkdir components
    echo + Components folder creation: Done.
)

ECHO/
ECHO Moving to Abstract...
cd abstract
ECHO\
ECHO Creating Abstract files
ECHO -------------------
:: _function.scss
if exist _function.scss echo - _function.scss already exists
if not exist _function.scss (
    type nul >_function.scss
    ECHO + _function.scss created
)
:: _mixins.scss
if exist _mixins.scss echo - _mixins.scss already exists
if not exist _mixins.scss (
    type nul >_mixins.scss
    ECHO + _mixins.scss created
)
:: _variables.scss
if exist _variables.scss echo - _variables.scss already exists
if not exist _variables.scss (
    type nul >_variables.scss
    ECHO + _variables.scss created
)
ECHO -------------------

ECHO/
ECHO Moving to Base
cd ..
cd base

ECHO Creating base files
ECHO -------------------
if exist _animations.scss echo - _animations.scss already exists
if not exist _animations.scss (
    type nul >_animations.scss
    ECHO + _animations.scss created
)
if exist _typography.scss echo - _typography.scss already exists
if not exist _typography.scss (
    type nul >_typography.scss
    ECHO + _typography.scss created
)
if exist _utilities.scss echo - _utilities.scss already exists
if not exist _utilities.scss (
    type nul >_utilities.scss
    ECHO + _utilities.scss created
)
if exist _base.scss echo - _base.scss already exists
if not exist _base.scss (
    type nul >_base.scss
    ECHO + _base.scss created
)
ECHO -------------------

ECHO/
ECHO You're all set up! Enjoy
ECHO/
ECHO Psst... Before you go :
ECHO Use below imports in your main inde.scss file :
ECHO/
ECHO    @import "./abstract/variables";
ECHO    @import "./layout/header";
ECHO    @import "./base/animations";
ECHO    @import "./base/typography";
ECHO    @import "./components/button";
PAUSE

@saini-g Thank you very much.
However, are you familiar with variables using this format?
Some variables are globally usable and some are not, even if declared in same *_.scss file.

Hi, thanks for this. But I have a problem. I use bootstrap with npm, how should I setup this? I'm a bit lost :( (New)

Thanks a lot! Very helpful.

Love it ::D

I Love it, Thanks man. :)

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 😛

man thank a lot for your help :)

thanks,very helpful