One of the most important lessons that I have learnt in life is how to teach myself. That is because in your academic or career path, you will encounter many professors/instructors whose teaching styles will not match your learning style. Luckily, STEM nowadays is very easy to learn by yourself. So I really encourage you guys to learn things on your own. Here are some steps to follow when you are stuck:
- Go to the documentation or Stack Overflow.
- Ask your neighbor. Getting to know your classmate might help you choose teammates for your project.
- I have a solution branch. Go look at it and see if it makes sense.
- Ask me!
If you guys don't agree with the paragraph above, I am more than willing to answer you guys.
Writing CSS kinda sucks. Many times when writing it, you copy paste a lot of code, and there isn't a great way to throw stuff into variables to be reused. An awesome library called SASS fixes all of it!
We will install a plugin called Live Sass Compiler that will compile your sass
to css
on the go.
- Go to
Extensions
in VSCode orShift + Cmd/Ctrl + X
and install Live Sass Compiler. - You will see that the install button just turned into reload. Click that and it should automatically restart your program.
- Here we will begin the sass watcher. See the blue bar at the bottom of your IDE (VSCode)? There should be an option saying
Watch Sass
with an eye symbol next to it. Click that! - Once you do that, the
OUTPUT
tab will pop-out underneath your text editor. It means that whatever change you are making tosass
files will automatically transpile tocss
files! - Open the
index.html
andcss/styles.scss
files! - Make a change to
h1
to give it the color ofred
to confirm that the styles are compiling. Also, see if there is asyles.css
file in yourcss
folder! BOOOM MAGIC ✨.
Once you are done with the lab, you can mess around with Live Sass Compiler and tell it where you want your
css
files to be compiled at. You can go to user settings in VSCode and typeliveSassCompile.settings.format
. Click this link for more info.
- Using a nesting structure, select all the
ul
andol
elements within the.container
class and give them the colorred
. - Now, at the top of the file, declare a variable
$red
, and assign it the colorred
. - Now, go back to where you styled the
ul
andol
elements. Change thatred
to$red
. - Now, change the value of the
$red
variable toblue
, and see the change take place! 👀
Continue making variables & doing nesting selection with these steps:
- Make the
ul
font family besans-serif
and theol
font family bemonospace
. - Make the background color of paragraphs in the the first container have blue color. In the second container, have those paragraphs be the color orange.
- Make the width of
container
elements have a width of 100% minus 40 pixels.
💡 Use the
calc
helper! Here is a link 😉
- Set the background color of the containers to be pink.
Let's get a little more advanced!
- Another great advantage of
sass
is that it allows you to import code from other.scss
files. Make a newcss/colors.scss
file and define new color variables that are not instyles.scss
. Importcolors.scss
into yourstyles.scss
with@import "colors"
statement!
- Use one of the color variables in
colors.scss
to change the color ofh1
instyles.scss
.
- Check out how to use
mixins
. Declare one calledside-margin
that takes in a$margin
variable as a parameter to set both the left and right margins to the value of$margin
. Since thecontainer
class lacks 40 pixels from the total width, try callingside-margin
insidecontainer
and pass inauto
as an argument to automatically center it in the page. Play with the container width and different values passed intoside-margin
.
Congratulations! At this point, you are done with the lab! You can keep learning about Sass and implement unique features into this exercise. Here are some suggestions if you are interested in learning more about sass
.
Try messing around with the & > ~
Sass operators and see how they work in Sass!
Here is a link that will help you learn about control directives for sass
.
I will use the slides and materials from today for future quarters. I also hope to see ways to improve so you guys are more excited to learn about new tools for this course. You guys matter to me a lot and despite how informal I look, I will take your criticism and opinions very seriously.
Here is an optional and anonymous survey.
Did you finish early? Help the people next to you if they have questions. Tell them a joke to make their day better as it will also make your day better. 😆