Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link
Owner Author

rveitch commented Dec 17, 2015

@devabdulbarik

This comment has been minimized.

Copy link

devabdulbarik commented Nov 29, 2018

Thanks to Almighty God!
Where the Abstracts Folder

@mikesparr

This comment has been minimized.

Copy link

mikesparr commented Dec 11, 2018

@kayoderock

This comment has been minimized.

Copy link

kayoderock commented Jan 9, 2019

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

@grepsedawk

This comment has been minimized.

Copy link

grepsedawk commented May 15, 2019

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

@DenisBun

This comment has been minimized.

Copy link

DenisBun 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

This comment has been minimized.

Copy link

grepsedawk commented May 24, 2019

How would you swap between 2 themes @DenisBun?

@chlorophyllkid

This comment has been minimized.

Copy link

chlorophyllkid commented Jun 16, 2019

@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

This comment has been minimized.

Copy link

grepsedawk commented Jun 16, 2019

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

@FrancoisPdev

This comment has been minimized.

Copy link

FrancoisPdev commented Aug 29, 2019

Thanks you my friend.

@abhagsain

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Copy link

grepsedawk commented Nov 25, 2019

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

@cristinaguzman

This comment has been minimized.

Copy link

cristinaguzman commented Apr 4, 2020

great :)

@carolyn01

This comment has been minimized.

Copy link

carolyn01 commented Apr 14, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.