Photo credit to Alexander Grey
This week was my final week of preparation for my job search: learning about and practicing job search methods, prospecting, networking etc. which are all ways to label and define basically: make contact with humans, because you are being hired by and working with humans! 😲
Oh also look, Skillcrush featured me on LinkedIn!! 💖
Sometimes you gotta get inceptiony with networking while being your own hype woman, like I featured my feature on LinkedIn, and now I'm featuring my feature of my feature here. 😂
So let's get into the new stuff in development I learned this week:
Nesting was an easy grasp from the SASS website, and so fun to implement bc it was an automatic update to how organized my CSS is!
Mon and Tue are my busiest days, so I was pretty light on my Github pushes. I made some more adjustments to my portfolio based on my career coach feedback on Mon, and on Tuesday I began nesting my CSS then finished it out on Weds. For some reason my tablet and desktop styles for my points of contact shift from being a column in mobile then row for tablet + desktop. I have job search stuff to do tho so I had to put debugging off for the next day (Thu)! But it was an easy fix- the styles just wanted to be nested like all the others, then they read properly.
Friday was all about PARTIALS. PARTIAL PARTY!! Wait... That doesn't sound that fun. 😂
When it came to utilizing partials in SASS, the explanation on the main SASS website was fairly simplistic and didn't cut it for me so I moved to some back-up from my standby homie w3Schools for some additional explanation on partials.
So both CSS and SASS allow you to create separate files of code that are going to be repeated frequently, then import them in. The major difference between the @import directive in CSS vs SASS is that it's slower with pure CSS bc an extra HTTP request is created every time you call it whereas with SASS the file is included in the CSS, so another reason to be grateful for working in SASS land!
You can import both CSS and SASS files in.
You don't need to transpile the "partial" code bc it will automatically be transpiled from the main code that you imported it into, so you would distinguish your file as a partial by leading the file name with an "_" but when you direct you SASS code to import the file remove the _ as it is assumed.
So my portfolio is only one page, BUT I can see this being EXTREMELY USEFUL to import different attributes in to make sure that my brand styles are consistent from page to page. There are color, font, and layout styles that would be consistent from page-to-page and I feel like I could get really crazy with dividing this into way too many different partials but I'm just going to start with those 3. I'm going to create a different branch this time to test that I like what I did before merge it with my main file.
Yep, I'm maybe already getting too crazy bc I also feel like the button styles deserve their own file and I'm setting up a separate file for the nav. This allows for the layout file to be a partial focused on code that I can use for other websites as well. For the sake of easy importing I'm tempted to just put all of this in one file, but that's also because this is a fairly simplistic page. I know that if I was working on a more complex website, I would want partials to ALSO provide me a pointed way to go to any re-usable code I'd like to edit, so I'm going to use this as practice.
WHELP, I love it! Definitely getting merged with my main branch! Now all the code that's present in the main file is specific to the sections on that page! SASS is already making it a lot easier for me to see that I have to remove a few redundancies in my code + scrutinize what I set as a general style vs not (for example my heading colors change every other section). But I'm going to finish exploring what SASS has to offer before doing a final audit.
I also learned from another Skillcrusher's post about how to transpile into different folders so I can keep my partials in their own folder and keep it nice and neat, so I'll mess with that next week. 💪✨
My website looks BEAUTIFUL and totally the same lol, so can checkout my SASS updated on Github.
Top comments (0)