Writing CSS kinda sucks. Many times when writing it, you copy paste code a lot, and there isn't a great way to throw stuff into variables to be reused. An awesome library called SASS fixes all of it!
- For this lab, we will be using macOS to install SASS
If you are using a windows machine, just use a lab machine for this lab since we don't want to wrestle with
gem
and Ruby installations during the lab
- Follow the installation instructions
- Confirm that you have
sass
installed withsass -v
- Make sure that you have
live-server
Like said above, writing CSS sucks since its way too tedious for its own good. Being able to have variables, import variables, mixins, and whatnot is super helpful. Sass also supports nesting your SCSS code so that its easier to read & encapsulate what and where the styles are being applied.
- Begin the live server using
live-server --port=4000
- Begin the sass watcher using
sass --watch sass:css
- Open the
index.html
andsass/styles.css
files! - Make a change to
h1
to give it the color ofred
to confirm that the styles are compiling & that the live-server is getting the changes.
- 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
adnol
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! (google it ๐)
- Set the background color of the containers to be pink.
Let's get a little more advanced!
Have quite a few color variables at the top that, if you had other SCSS files, you'd want to use there? Make a new sass/colors.scss
that defines those color variables and import them into your styles.scss
!
Check out how to use mixins
and utilize one called sideMargin
to set both the left and right margins of the container class. Since the class lacks 40 pixels from the total width, try setting containers to auto -matically center in the page. Try playing with the container width and different values and different values passed into sideMargin
.
Try playing around with the & > ~
Sass operators and see how they work in Sass!
Finish early? Figure out how to compile all of your compiled CSS code into a single styles.css
file.