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.

@fanfanpsg

This comment has been minimized.

Copy link

fanfanpsg 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 😛

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.