code icon

CSCI 1720

Intermediate Web

Lab 6 - Sass 1

Instructions

  1. In your working_folder, inside your userid.csci1720.net\labs folder, make a new folder named lab6_sass1. Create two new folders inside the folder: css and scss
  1. Download sass.zip and extract the files to the lab6_sass1 folder. This will add your index.html page (mostly finished) and add an images folder with this lab’s images
  1. Your sass folder should now look like this
Sass file structure
Fig. 1 - Sass file structure

With SCSS, the // comments don't copy over to the final CSS file while the /* */ do. So, we're using the double slash in our SCSS files to localize them there

  1. Open the lab6_sass1 folder in Visual Studio Code (VSC). Edit the index.html file, updating the meta-information in the <head> element. Don't forget to update the <meta...> & <title> elements!
  1. Go to File Explorer and navigate to your lab6_sass1 folder. Click in the address bar, which will collapse the path and highlight it. Replace the path in the address bar with 'cmd' and press Enter. This will open the command prompt with its current directory set to your working folder
Sass is watching
Fig. 2 -Command Line
  1. Enter sass --watch scss:css
Sass is watching
Fig. 2a -Sass is watching...
Click image to zoom in

What this does is tell Sass to watch your scss folder for changes. The syntax is

sass --watch source_folder:destination_folder
When you modify a .scss file, Sass will recompile it into your CSS folder. We could, and in the next lab, will, I think, keep all of the files in a single folder, say, for example, the css folder. Then the command would be:

sass --watch css:css
But I like to keep them in separate folders for the sake of (what I think is) easier maintenance

_variables.scss

  1. In VSC, create a new file in your scss folder named  _variables.scss (this is a Sass partial -- note the underscore in front of the name. This is important). A quick way to do this is to right-click the folder (scss) and select 'New File' from the menu
Sass is watching
Fig. 2b -Sass is watching...
  1. Add the following code to  _variables.scss
screen shot screen shot
Fig. 3 - Adding variables
  1. Save your changes

Take a look at the command line display. Nothing's happened? But Sass is supposed to watch for changes in .scss files. What gives?

main.scss

  1. Create a second file in the scss folder. Save it as main.scss
  1. Add the following code to main.scss
Create main.scss Create main.scss
Fig. 4 - Creating main.scss

The first line imports the partial, _variables.scss, into the main.scss file. When we're importing partials, just the name of the file is required - leave out the underscore and the file extension

Notice also that a { ... } is nested inside the body { ... } selector and a:hover{ ... } is, in turn, nested within the a { ... } selector. With respect to a:hover, remember that the ampersand is equivalent to this, a self-reference

Turns out, the @import directive is now deprecated. The folks at sass-lang.com recommend using @use instead. The as * part is for defining namespaces. If you have a bunch of files you're importing, defining namespaces for them protects you from problems that would arise out of having, for example, duplicate class names in different files. We're not going that far with this lab, obviously, hence the as *

Create main.scss
Fig. 4a - Creating main.scss
- rules for headings
Create main.scss
Fig. 4b - Creating main.scss
- container and image classes
Create main.scss
Fig. 4c - Creating main.scss
-styling paragraphs
  1. Save _variables.scss, then main.scss

You may have noticed that we included a bunch more variables and classes in _variables.scss & main.scss than we actually ended up using. What I'm trying to demonstrate here is extensibility - we could use this code for future projects, which may benefit from the other variables and classes. So, when I make a class, for example, to define font size as large (1.6em), I go ahead and create additional classes for small (1em), medium (1.2em), and extra-large (2em). This keeps the class names consistent and gives me additional classes I can use in the future, if I need them

  1. Take a look at your command window. You should see something like (it'll vary a little, based on whether you're completing this at home or in a lab)
Create main.scss
Fig. 5 - Sass output

Every time you make a change to one of your scss files, the command window will log the fact and notify you that a new CSS file has been compiled. It will also provide the line number of the first error it encounters, if any

screen shot

  1. In VSC, open your css/main.css file. We wouldn’t ordinarily do this (remember, Sass-ers don’t touch the actual CSS file. Sass does that for you), but notice how the CSS code is created for you. Close the file

What happens is this (and I had a bit of a problem adjusting to it when I first started using Sass): If you edit your .CSS file, it'll work. But when you make any changes to the SCSS file later on, the changes you just made will be overwritten by Sass. You'll see my personal fix below, but real quick, I started saving my CSS files in compressed format, which reminds me not to mess with them directly

Real quick... return to your command window. Type Ctrl+c (you may have to do it twice). When it asks you if you want to exit, say yes. Then repeat the command (hit the ↑ key), but add --style expanded to the end before hitting Enter

Sass output options
Fig. 6 - Sass output options
Click image to zoom in
  1. Open main.css again. Notice how the format has changed (Later, we'll use --style compressed to demonstrate a production-ready CSS file). Close main.css
  1. Launch index.html in Live Preview. Right-click and select ‘Inspect’
  1. Select an element and look at its associated CSS. Notice how the developer tools point you to the location in the SCSS files the code comes from, not the CSS file

What the heck do you think this means?

screen shot

  1. Now, go back to the command prompt and type Ctrl+c and 'y' to terminate the Sass run. Rerun Sass (hint: press the up arrow a couple of times, unless you just like all that typing). This time,
    add --style compressed to the end of the command instead
  1. Make a small change to one of your SCSS files (add a space at the end of the line or something) and save the file
  1. Reopen main.css in VSC
  1. This is minification in action. We took about 50 lines of the nested CSS and squeezed out all of the extraneous whitespace. Cool, huh?
screen shot
Minified CSS

If you haven't already heard me [pendantically] preaching about this yet: The reason that we compress CSS and JS files like this before deploying them to production is that, while browsers ignore extra white space in source files, they still have to parse it out when the page loads. This takes a little time. BUT! But on a high-traffic production server, that 'little time' adds up and can affect load times. Negatively. Which. You don't want. So, we leave all the whitespace in while developing the site to help with readability and troubleshooting. Then, right before deployment, we minify the file to get rid of the extra white space. The browser doesn't care; but our users will

Wrapping this up

  1. Refresh the page in your browser
  1. Admire your work. Hover over the hyperlinks to observe the hover effect in action
  1. Return to the index.html file in VSC
  1. In the last paragraph, add class='notice' to the paragraph’s opening tag
Adding a class
Fig.8 - Adding a class
  1. Returning to main.scss, add
Adding a class
Fig.9 - Define .notice class

This is one of Sass's built-in functions, which will modify the color of an element. Sass has a number of built in functions which further simplify the task of creating CSS

screen shot
Your final product should look
something like this
(click to enlarge)

Uploads & Such

  1. Log in to csci1720.net with FileZilla
  1. Navigate to your Sass directory on the left (local) display and the labs directory on the right (remote) display. Drag and drop your lab6_sass1 folder into the labs directory on the right, uploading all your files and folders to the server
  1. In the browser address bar, enter your_id.csci1720.net/labs/lab6_sass1/. For example: ramseyjw.csci1720.net/labs/lab6_sass1/

Remember, since our landing page is named index.html, we don't have to specify the file name in the URL - The browser will automagically load it

  1. Press ENTER to see your work displayed from the server
  1. When all is well, copy the URL of your index.html file to a new text file in VSC. Save the file as lab6_sass1.txt and upload it to the D2L Lab 6 folder

Have a nice day 😊