Last active
November 13, 2024 08:34
-
-
Save rveitch/84cea9650092119527bc to your computer and use it in GitHub Desktop.
Sass 7-1 Pattern
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I Love it, Thanks man. :)