Skip to content

Instantly share code, notes, and snippets.

@rveitch
Last active November 13, 2024 08:34
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
@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