code icon

CSCI 1720

Intermediate Web


Lab 6 - Sass II

  1. On your external drive, inside your userid.csci1720.net/labs folder, make a new folder named sass2. Create a new folder inside the sass2 folder: css
  1. Download sass2.zip and extract the files to the sass2 folder. This will add index.html, angular.html, bootstrap.html, brackets.html, chrome.html, github.html, jquery.html, and sass.html pages (finished) and add an images folder with this lab’s images
  1. Add a subfolder, css. Your sass2 folder should now look like this
img 1
Fig. 1- Folders and files
for Lab 6
  1. What we’ve got here is the completed HTML files, but no styling. We’re going to use Sass to generate our CSS for the 'site'
  1. Now we have to fire up Sass
  1. Open the command line using the 'File Explorer' trick from last lab
  1. Now, this is tricky (OK, not as tricky as the last one). Enter

    sass --watch css --style expanded

    This time, Sass will watch the css folder only. We'll store our .scss and .css files in that folder

Again, what does this do? It’s telling the Sass application to watch scss files in your css folder and, when they’re changed and saved, recompile the main CSS file. In the last lab, we actually had the scss files compiled in a separate folder. This makes the command much easier since you don’t have to add the destination folder to it. Since Brackets Sass uses the same folder [by default], we’re going to do the same from the CLI. It probably doesn’t make any difference, but, just in case…

  1. Open the sass2 folder as a Brackets project
  1. You can see from the file tree on the left that your working directory is now your sass2 folder

Hammer Time! Let’s Do Some Coding!

Note: I included line numbers in these screen shots so I can refer to specific bits of code in the explanations. It isn’t necessary for your line numbers to, uh, align with mine for the code to work. But if you are careful and do so, it’ll probably make the rest of this monstrosity easier to follow.

  1. Right-click the CSS folder in the file tree and select New File. Name the file _variables.scss
  1. We’re going to create three SCSS files; two partials and the main. Start with _variables.scss
  1. Enter a comment block identifying the file
img 4
Fig. 4- Comments
  1. Remember, with Sass, we can use either /*…*/ notation, or // notation. The difference is that the /*…*/ notation will carry over to the compiled CSS while the // won’t
  1. Now, let’s create some variables
img 5
Fig. 5- Variables
  1. Save the file
  1. Click the caret next to the CSS folder to expand it (if it isn’t already expanded). Notice that _variables.scss is the only file in the folder. Nothing has been compiled into CSS because _variables.scss is a partial
  1. Right-click the CSS folder again and select New File and name it _dimensions.scss
  1. We’re going to add some variables for dimensions and element styling
  1. Add your comment block:
img 6
Fig. 6- Comments
  1. Moving on to image dimensions. Notice that lines 8-11 in the screen shot are very similar. You can save yourself some typing by typing the first one and, while the cursor is on the same line, typing Ctrl+d three times, duplicating the line. Then all you have to do is edit the differences
img 7
Fig. 7- Dimensions
  1. Then container dimensions
img 8
Fig. 8- Dimensions
  1. Floats and border radius
img 9
Fig. 9- Dimensions
  1. Finally, come variables for calls to action
img 10
Fig. 10- Dimensions
  1. Save your changes

Main CSS File

  1. Now, let’s create our main SCSS page!
  1. Right-click the CSS folder and select New File. This file will be named style.scss. Notice there’s no underscore in front of its name
  1. Add your comment block
img 11
Fig. 11- Comments
  1. Now, we’ve created two SCSS partials. In order to use them, we have to import each (Notice that we only use the file names, omitting the underscore and the .scss part):
img 12
Fig. 12- Imports
  1. One of the neat things about Sass is that it gives us the ability to structure our code a little more intelligently than vanilla CSS does. Create a body rule:
img 13
Fig. 13- body rules

Note: Everything that follows, up until #37, will be nested inside the body rule. I had to break up the screen shots to get them to work

  1. Now, we’re going to nest all of the following within the body rule (starting with line 10 in the screen shot)
img 14
Fig. 14- Adding/nesting rules
img 15
Fig. 15- Adding/nesting rules

Notice the a:hover pseudo class. Sass includes some functions as well, one of which is the desaturate function (line 39, in the screen shot), which takes a variable and a percentage as parameters. We’ll see how that works once we compile our code and display the pages. Check here for a full list of Sass’s functions

img 16
Fig. 16- Adding/nesting rules
  1. So now we’ve got code that nests several rules inside the body, then rules for anchor elements that are descendants of the body, THEN nav elements that appear in the body and their descendants, and finally some rules for paragraph elements that are descendants of the body. Most everything I’ve read about Sass recommends that nesting more than three deep can be counterproductive, but this example shows us this in action
Ctrl+d  is your friend here, too because you can duplicate multiple lines. So, type in the first part:
img 17
Fig. 17- Rules for sizing images
Then highlight it (including the blank line – line 58)
img 18
Fig. 18- Rules for sizing images
And press Ctrl+d three times
img 19
Fig. 19- Rules for sizing images
Editing the new blocks should result in:
img 20
Fig. 20- Rules for sizing images
add
img 21
Fig. 21- floats
  1. Now we need to style our container
img 22
Fig. 22- .container

Notice the max-width and min-width rules. This provides some responsiveness to our design

  1. Style the project’s headings:
img 23
Fig. 23- Headings
And
img 24
Fig. 24- Headings

I forget why I had to do this…something with the spacing, I think. Sometimes, I’ve learned, you just gotta play with the settings to get them to work the way you want

  1. Now, let’s look at Sass extensions – don’t forget Ctrl+d! Once you’ve typed in lines 111-118, you can highlight lines 111-118 and type Ctrl+d twice, then just replace the values -- (I’ll explain after the screen shot):
img 25
Fig. 25- Calls to action (extensions)

So, notice lines 111-118 above. They set rules that are common to all calls to action (.cta). Then, we extend those rules with additional rules in lines 120-133. The @extend .cta; adds lines 111-118 to each (.cta-red, .cta-yellow, and .cta-blue), then lines 122, 127, and 132 apply the appropriate background color to each. Typically, the extensions serve as code snippets that aren’t used by themselves, but ultimately save us some typing. We could easily create additional calls to action, reusing the code as we go

  1. Save style.scss
  1. Take a quick look at your CLI
img 26
Fig. 26- CLI
  1. If you look in your CSS folder now, you should see
img 27
Fig. 27- File tree
  1. When you saved style.scss, the CLI created the style.css file. The style.css.map file, again, maps the SCSS to the CSS for the developer tools. Look at style.css. Don’t change it! You should let Sass handle the writing of the CSS file. But check it out:
  1. Return to your CLI and type Ctrl+c → 'y' → Enter
  1. Type the up arrow - , returning to the sass --watch… command. Add --style compressed at the end and hit Enter
  1. You may have to make a small change to one of your SCSS files to get it to recompile
  1. Click on style.css
img 28
Fig. 28- Minified CSS

Again, all I can say is, "That's pretty cool!"

  1. Click the Live Preview button: live preview button
  1. In a few moments, you should see your index.html file displayed

Note: this becomes a little more challenging if you’re using Brackets to develop PHP code. You have to have an Apache server running (a.k.a. XAMPP or one of its clones), create a symlink to its root directory, and point Brackets at that symlink. Usually, if I’m developing with PHP, I just manually point my browser at the folder

  1. Take a little time to explore your new site (it’d be nice if you took the time to read all of the text I laboriously copied/pasted for each page). Hover over some of the links, notice how the link's appearance changes as you hover over it - that’s the Sass desaturation function at work)

Finishing Up

  1. Once you’re satisfied with your work, log in to your_id.csci1720.net with FileZilla
  1. Navigate to your sass2 directory on the left (local) display and the labs directory on the right (remote) display. Drag and drop your sass2 folder into the labs directory on the right, uploading all your files and folders to the server
  1. Return to your browser and open a new tab
  1. Enter your_id.csci1720.net into the address bar, for example, mine would be
address
This is the domain of your site, then add /labs/sass2/, which is the path to your lab
address

Since our landing page is named index.html, that’s all we really need to enter. Remember, browsers automagically look for web compliant files whose names begin with either index or default. But for the sake of thoroughness, add index.html

  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 NPP. Save the file as sass2.txt and upload it to the D2L Sass 2 folder

Have a nice day 😊