Note: Anything in orange is what you wanna use/write as code
Primary File:
There will always be a primary file. This will always be main.scss
Inside of main.scss, all you want to do is write connections to the subfolders
You write this as “@use ‘xxx’;
-Replace xxx with the title of the subfolder
-Generally, you only want 4 subfolders, which are the following:
a- abstracts
This is where you want to define any shortcuts. For example, if you have any colour schemes you like,
you would define the specific colours with a shortcut name. For example, “$box-orange: #ffb700;”
The $box-orange is a shortcut for that specific colour and this can be referred to back in other files if you
link to that file
b- base
This is where you define your base attributes for your webpage. For example typography, colour choices,
etc.
The only files in here would be common styling elements/the general rules for the tags. For example: the
_typography file would contain rules for p, h2, h3, etc. with font-family, sizing, colour, etc.
c- components
This is where you put stylings specific to shared elements or components between webpages.
The only files in here should be:
-_index
-Any shared element, beginning with an _. Ie _header, _footer
The header and footer stylings always go in this area
p- pages
This is where you put stylings specific to the pages themselves.
The only files in here should be:
-_index
-Any page you’re making as a sass file, beginning with an _. Ie, _portfolio, _about, etc.
Sass tips:
-Every subfolder needs an _index file
-For a homepage, you use _home instead of index as a codename when using sass
-All files in the abcp subfolders need the _ before them or else they will not work
-Always click “Watch Sass” before testing because you will not see results
-In every _index file, you only want to connect to the other files of that subfolder. You use “@forward
‘xxx’;” to connect to the other files. Replace the xxx with the file names
-If you want to connect to a file in a different subfolder, write this at the top of the file you’re working in:
“@use ‘../xxx/yyy’ as z”
-Replace xxx with the subfolder that it lives in
-Replace yyy with the file you wish to connect to
-Replace z with any letter that you wish to use as a shortcut
-When writing a CSS rule, always use the shortcut you defined with what style you wish to do, if
it refers back to the linked file.
-For example, if you defined “$box-orange: #ffb700;” in a file in the abstracts, you would write:
-@use "../abstracts/box-colours" as c; at the top
-Whatever you want to make that orange, you would write “color: c.$box-orange;”
Final Tip:
***Be attentive of the file you’re working in.***
Generally, most of your time will be working in the Components and Pages subfolders
Again, components are for shared elements such as a header and pages for page specific stylings
