Getting Started on a Sass project.
Good day, all!
TL;DR at the end 🙂
Background: I've been learning web dev on my own for awhile. I started with freeCodeCamp, moved on to The Odin Project, and recently, I started taking an OpenClassrooms course (paid for my by employer 🙌). The way this program is structured, you don't go to classes. They tell you what you need to do for each project, but it's up to you to figure out how to do it. When finished, you do a presentation to prove you learned it then you move on. They do provide courses on the subjects, but I've found better results with Kevin's videos and other online resources.
Problem: I've reached a project that they would like me to use Sass on. I've watched lots of courses on it and read many articles, but I'm feeling a little overwhelmed. I'm comfortable with the actual code and I'm feeling confident about writing it. What is overwhelming to me is figuring out where to start when you are starting from scratch.
In other words, I have no variables, no mixins, no components, nothing. All of the options seem to be giving me a little paralysis.
I imagine that if I had a file of my frequently used items, I could slot it in and just start running.
Question:
When you are starting a new project, how do you begin? What would you do first? Do you start writing random variables and components? Do you start writing the main Sass and just add those to your partials as you need them?
*I realize the answers will vary drastically person to person
TLDR: I'm overwhelmed with all the options on starting a new Sass project from scratch. Where do you begin when you start a new project completely from nothing?
3 Replies
You could make base folder for your sass project. A folder full of files containing useful mixins, functions etc. that you use in almost every project and start from there. Kevin has great example on his github. You can check my example here if you want as well (I've stolen some stuff from Kevin's).
GitHub
GitHub - boristenkes/sass-base-folder: Default files for starting p...
Default files for starting project with Sass. Contribute to boristenkes/sass-base-folder development by creating an account on GitHub.
I would start by writing a little of the bones (html) of the project, if you haven't already. Then I usually make a main.scss file where I put in some basic structure stuff, how I want the body to be structured, base font-size, etc. I usually create another file called _resets.scss importing it into main.scss which does things like:
Then anything that can be split off and reused go into a new file, and imported into main.scss. But really it's an evolution. Things might start in main, then i realise it's better off in it's own file.
Fun variables to start with are colour, imo. Decide on a primary and secondary colour (or however many you want) and you can use sass variables to store them and reuse them throughout your project. Then if you want to change your whole primary colour, you only have to change it in one place. It can get quite granular, but it definitely doesn't have to start that way. Just start playing (there's nothing so paralysing as a new, blank file ime), make things up on the fly.
If you have a lot of input styling, throw that in it's own file, and if you want them to all look the same, make their background colours, border styling, padding etc variables that all inputs use, or use parts of. Mixins and functions can come later, you'll get curious and want to try them out.
@naa___ @.tenkes Thank you both for answers! It sort of clicked for me after reading your replies. I came up with a plan of attack! I was definitely overthinking the whole thing. 😂