Photo by Crawford Jolly on Unsplash
Working, building on your skillset, and conducting an intensive job search is hard, y'all! I definitely had to recalibrate this week and formulate a new approach that would work better for me (which for me meant spreading things out more across all seven days of the week rather than concentrating it into 5 week days).
I've been at it for two weeks, and already have my first interview next week! I am taking a step closer to my dream career! 💪✨
I'm going to start including what topics I am learning in code in the titles bc this is becoming my primary note space as I add new skills to my repertoire.
Ok, so let's keep learning about what SASS can do.
A general rule I want to note here, but I didn't learn about until reading W3 on mixins, when naming something in SASS hyphens and underscores are considered the same thing so my variable named '$purple-blue: #351D77;' is the same thing as '$purple_blue: #351D77;'
NOT to be confused with the leading underscore for files, which indicates that the file is a partial.
OR with a leading underscore or hyphen for naming a something in a partial: variable, mixin or function ('members' of the used file) that you like to be considered private and not imported in.
I realized that SASS' main website advises using @use when discussing partials, whereas W3 used @import. Thankfully my other old standby CSSTricks was here to clear up my confusion about @import vs. @use.
Firstly, @import is also available in straight CSS in the same capacity (here's W3 school's breakdown) so I'm happy to have something that is distinguished in SASS.
I definitely want to use @use bc, unlike with @import the file is only called in once no matter how many times you use it in the file which makes for faster compiling.
Also @import utilized a global namespace, and you can use it to import 3rd party modules so this gets quickly confusing if there are multiple with the same name.
In order to get around this issue, SASSy individuals had to manually add prefixes to their functions and variables. But using @use automatically generates a 'namespace' based on the file name.
So members of the used file are only made available locally, but this means that they are also not passed on to imports down the chain so you have to import modules into each other (for example, I used variables from my "_colors" partial in my "_buttons" partial so I put @use 'colors'; in my "_buttons" partial) and you must specify which namespace you are drawing from.
You could use a period syntax in order to define which namespace you are accessing followed by which member. So the value of a property would be <namespace>.$variable/function()/mixin().
You can also import it in using @use and remove the namespace of make a new one like @use buttons as *; which will remove the namespace (but it is still locally scoped) or @use forms as f; to rename and likely shorten it to something easier to refer to.
I converted all of my @import to @use on Tue/Weds after scrutinizing this more. I located them at the top of my main.scss file bc, like React imports, @use must be put in place before any other rules.
Finally, if you have a function used multiple times in the files that you import there is no way to specify which definition you are referring to so specifying with the period syntax is the best way here.
After overviewing all the other capabilities of SASS, I decided I wanted to address the fact that my sections are alternating in background color as well as the colors of headers and fonts. But because I have to address different selectors (h3, h4, p) and include a background-color property for each section, the best way seemed to be just include these in the nesting of the general styles. Also, more importantly my nesting won't get overly complicated by doing this (not more than 3 levels deep) so I opted for this at the best way.
Wiao.
Finally, I wanted to give on of SASS' built-in modules a try. So I removed to variable I had set as a lighter shade of pink then designated as the color for the hover effect of my buttons, and I instead imported in SASS' built-in color module and used it to create a shade of pink that was 10% lighter than the original pink I chose for my buttons!
After I did this I did some reading on some functions I can utilize with SASS, which is pretty crazy stuff that I normally relate to JS! I will probably do most of these in JS, but keeping them in mind.
Then I went through and pruned a lot of redundant flex properties from my code and adjusted some inconsistencies in my headings in my tablet and desktop styles, and my code is looking ✨MUCH neater✨!
Finally, to wrap up this week I started a new Frontend Mentor Challenge featuring a light and dark-mode as well as APIs! I got my repo started, pushed to Github, and TRIED to get the Figma design to open but it just wouldn't do. I have a feeling that my computer just needs a restart after installing Figma fresh, BUT I have waaayy too many windows and tabs organized into the windows right now to let them go atm. 😅
I will revisit this situation over the weekend... Check the preview of what's to come!
Top comments (0)