Skip to content

Instantly share code, notes, and snippets.

@rveitch
Last active May 25, 2024 16:28
Show Gist options
  • Save rveitch/84cea9650092119527bc to your computer and use it in GitHub Desktop.
Save rveitch/84cea9650092119527bc to your computer and use it in GitHub Desktop.
Sass 7-1 Pattern
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
@rveitch
Copy link
Author

rveitch commented Dec 17, 2015

@devabdulbarik
Copy link

Thanks to Almighty God!
Where the Abstracts Folder

@mikesparr
Copy link

@kayoderock
Copy link

kayoderock commented Jan 9, 2019

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

@grepsedawk
Copy link

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

Copy link

ghost commented May 24, 2019

@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

@grepsedawk
Copy link

How would you swap between 2 themes @DenisBun?

@christophervoigt
Copy link

@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.

@grepsedawk
Copy link

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

@FrancoisPdev
Copy link

Thanks you my friend.

@abhagsain
Copy link

abhagsain commented Sep 28, 2019

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 😛

@samayo
Copy link

samayo commented Nov 25, 2019

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?

@grepsedawk
Copy link

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

@cristinaguzman
Copy link

great :)

@carolyn01
Copy link

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

@HowdyMcGee
Copy link

HowdyMcGee commented Aug 16, 2020

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.

@samayo
Copy link

samayo commented Aug 22, 2020

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

@jochri3
Copy link

jochri3 commented Jan 5, 2021

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

I think that utils is the equivalent abstract

@enginW
Copy link

enginW commented Jan 22, 2021

thank you, this is great i will use

@pedrocardoz0
Copy link

Thanks, that's perfect!

@Meilline
Copy link

Thanks a lot !

@saini-g
Copy link

saini-g commented Jun 1, 2021

My SCSS 7-1 architecture

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

@stebenwolf
Copy link

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

@Tomerozfresko
Copy link

@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.

@lucasfernandezdev
Copy link

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)

@tjcchen
Copy link

tjcchen commented Sep 18, 2022

Thanks a lot! Very helpful.

@Tsu3xyz
Copy link

Tsu3xyz commented Dec 15, 2022

Love it ::D

@Mobin-Karam
Copy link

I Love it, Thanks man. :)

@Mobin-Karam
Copy link

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 :)

@DevRufet
Copy link

thanks,very helpful

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment