Join Ray Villalobos for an in-depth discussion in this video Using the exercise files, part of Sass Essential Training.
- View Offline
- There are a number of ways to follow along with the exercises on this course. Now first, this course comes with a brand new version of our practice environment. Even if you've used practice environments before, this is a slightly and different version of what you're used to. It's also the easiest way to follow along with this course. Now to get started, you'll notice that to the right of each video with an exercise, you'll see a little icon that lets you open the exercises for the current video within our practice environments.
Simply click on one of those icons, and the practice environments will open up. These environments will open up with a version of the files I used in the course at the beginning of that video. You can open up or edit files using the file browser on the left. Some additional files are available using the pop-up menu in the center of the screen or the tabs to the left. This is a live editing environment, so if you make a change in the practice environment, it will process the files for you and update the preview.
Now this is also a real editor, so just like you'd expect, you can double click to open files, use the tabs at the top to switch between open files, or even create new files by using the File menu or by right clicking on a folder. This course is also available through GitHub at this URL. In GitHub you'll see that the project is organized into different branches. Each branch corresponds to a video in the course.
You can clone this repo into your local hard drive if you want to follow along. Let's do that in the Terminal. To make things easier for myself, I'm going to make sure that I am on the desktop by issuing a cd ~/Desktop command. On a PC, you want to be using an application like Git Bash because the Unix commands will be the same as the ones that I'm using right now. Once you get to the desktop, I'm going to go ahead and issue a git clone command and then -b for a specific branch that I want to download, and in here I will put in the chapter name and then the video number, so this would be 03_01 for the first video in Chapter 3.
And then either a "b" for how the files are at the beginning of the video, or an "e" to get the files from what they look like at the end of the video. Now these all refer of course to the different branches in GitHub. You can see them right here. So 03_01b would be this one right here. You can also use GitHub to navigate directly to this position, and you'll see that these files will reflect what was in Chapter 3, Movie 1 at the beginning, but let's go ahead and download these to our local environment.
Now all we need to do is add the GitHub URL, and the easiest way to do this is to go back into GitHub, and use this link right here to copy that URL to the clipboard, and then we can switch back to our Terminal and paste that and hit Return. After this, you want to switch to the current directory, which is called sassEssentials, and then you want to do an npm install command.
You may have to run the sudo command at the beginning, and you may have to put in your password here. And then once that is done, you can issue the gulp command, which will run the automation that will automatically process the Sass files for you. You'll notice that on the desktop, we have the sassEssentials folder, and we can open that up with our favorite text editor. Now I created a special course as a prerequisite for this course called "Up and Running with Git and GitHub." It shows you how to download the different branches for any GitHub project.
Make sure you watch "Up and Running with Git and GitHub" if you're not comfortable working with GitHub before watching this course. So now that you know the basics of working with the files through the practice environments or Git and GitHub, it's time to get going with Sass Essential Training.
- Working with variables
- Nesting styles
- Creating mixins
- Conditional statements and loops in SassScript
- Extending your mixins
- Working with lists and maps