1 00:00:00,390 --> 00:00:01,850 Before we install Sass, 2 00:00:01,850 --> 00:00:05,870 let's go over a few misconceptions we might have about using Sass. 3 00:00:05,870 --> 00:00:09,310 So, the first one might be, there's no point in attempting Sass 4 00:00:09,310 --> 00:00:13,010 unless you've had experience with the console, Git and Ruby. 5 00:00:13,010 --> 00:00:15,180 Or we may think that to use Sass, 6 00:00:15,180 --> 00:00:18,440 we'll need to know a ton of commands to make everything work. 7 00:00:18,440 --> 00:00:22,290 And Sass steers too far from CSS, we have to learn a new language. 8 00:00:23,290 --> 00:00:26,760 Well first, if you think you'll need to know Ruby to install and use Sass, 9 00:00:26,760 --> 00:00:28,160 don't worry because you don't. 10 00:00:28,160 --> 00:00:30,730 Hey, I'm not even close to being a Rubyist. 11 00:00:30,730 --> 00:00:34,080 And we'll just need to know a few friendly commands to get up and running. 12 00:00:34,080 --> 00:00:36,070 It won't be scary, I promise, and 13 00:00:36,070 --> 00:00:40,470 finally, since Sass is a subset of CSS, it's not a new language. 14 00:00:40,470 --> 00:00:43,520 We don't even need to use Sass syntax if we don't want to. 15 00:00:43,520 --> 00:00:47,320 Writing plain CSS is actually writing valid Sass. 16 00:00:47,320 --> 00:00:50,970 Yes, it is an extra layer of obstruction we're adding to our workflow, but 17 00:00:50,970 --> 00:00:55,550 it's a powerful layer that, like I said, makes writing CSS more efficient, cleaner, 18 00:00:55,550 --> 00:00:57,400 maintainable, and most of all, fun. 19 00:00:58,650 --> 00:01:02,130 Sass lives and works locally on our machine, so 20 00:01:02,130 --> 00:01:06,940 we really can't do anything just yet until we have Sass installed on our computers. 21 00:01:06,940 --> 00:01:08,590 Since Sass is a Ruby gem, 22 00:01:08,590 --> 00:01:13,190 we'll need to have Ruby installed on our machine in order to install Sass. 23 00:01:13,190 --> 00:01:14,490 But, as I mentioned earlier, 24 00:01:14,490 --> 00:01:19,280 don't worry because we don't need to know any Ruby to install and use Sass. 25 00:01:19,280 --> 00:01:23,580 And if you're working on a Mac, chances are, you already have Ruby installed. 26 00:01:23,580 --> 00:01:26,030 Now, it may sound a little nerve-racking, but 27 00:01:26,030 --> 00:01:30,290 honestly, the quickest way to start using Sass is with the command line. 28 00:01:30,290 --> 00:01:34,220 So, first things first, since I'm on a Mac, I'll need to bring up Terminal, and 29 00:01:34,220 --> 00:01:36,150 that's where we'll write our commands. 30 00:01:36,150 --> 00:01:39,950 So on the Mac, the Terminal app comes installed by default, and 31 00:01:39,950 --> 00:01:43,350 it's located in our Utilities folder. 32 00:01:43,350 --> 00:01:45,150 And don't worry if you're running Windows machine. 33 00:01:45,150 --> 00:01:48,670 I've posted the windows installation instructions in the teacher's notes. 34 00:01:48,670 --> 00:01:49,460 They're very similar. 35 00:01:50,830 --> 00:01:55,910 Next, inside Terminal, or in your Command Prompt, we'll install Sass by 36 00:01:55,910 --> 00:02:02,830 writing the command gem install sass, then hit Enter. 37 00:02:02,830 --> 00:02:06,850 Now this command goes out and fetches the latest version of Sass and 38 00:02:06,850 --> 00:02:09,090 installs it on our computer. 39 00:02:09,090 --> 00:02:12,190 Now, if we get an error message after running this command, 40 00:02:12,190 --> 00:02:14,290 it will likely be a permissions error. 41 00:02:14,290 --> 00:02:17,396 For example, here we're getting an error that says, 42 00:02:17,396 --> 00:02:21,187 you don't have write permissions for the Ruby/Gems directory. 43 00:02:21,187 --> 00:02:23,606 Now if we see this error, 44 00:02:23,606 --> 00:02:29,608 we'll need to use the command sudo gem install sass instead. 45 00:02:29,608 --> 00:02:33,618 [SOUND] Sudo allows us to run the installation without the permission 46 00:02:33,618 --> 00:02:34,327 problems. 47 00:02:34,327 --> 00:02:38,890 It sort of puts us in a super user mode to get around permission issues. 48 00:02:38,890 --> 00:02:43,610 Now it does ask us to enter our password to confirm the installation. 49 00:02:43,610 --> 00:02:47,830 And this will usually be your user account login password. 50 00:02:47,830 --> 00:02:51,826 And once we do that, it grants us the permissions to install and run Sass. 51 00:02:51,826 --> 00:02:53,163 [SOUND] 52 00:02:53,163 --> 00:02:55,904 [BLANK_AUDIO] 53 00:02:55,904 --> 00:03:00,104 All right, so now let's make sure that we have Sass installed on our computer. 54 00:03:00,104 --> 00:03:05,283 And we can do that by typing the command sass -v. 55 00:03:05,283 --> 00:03:08,171 [SOUND] And once we hit Enter, if all goes well, 56 00:03:08,171 --> 00:03:11,444 this returns the version of Sass we've installed. 57 00:03:11,444 --> 00:03:18,530 In this case, it's Sass 3.4.13, Selective Steve. 58 00:03:18,530 --> 00:03:20,880 Now your version might be different, 59 00:03:20,880 --> 00:03:24,720 most likely a higher version compared to the version at the time of this recording. 60 00:03:24,720 --> 00:03:25,800 And that's okay. 61 00:03:25,800 --> 00:03:29,670 That just means you have the very latest version of Sass installed. 62 00:03:29,670 --> 00:03:32,530 All right, so it looks like we're all set with our installation. 63 00:03:33,590 --> 00:03:37,410 But what if we only need to update to the latest version of Sass? 64 00:03:37,410 --> 00:03:40,460 Let's say you've already installed Sass in the past, and 65 00:03:40,460 --> 00:03:42,330 now you just need to update it. 66 00:03:42,330 --> 00:03:48,487 Well, to do that, we'll need to type the command, gem update sass. 67 00:03:48,487 --> 00:03:53,145 [SOUND] And again, if you get any permissions errors doing this, 68 00:03:53,145 --> 00:03:55,657 you'll need to run it under sudo. 69 00:03:55,657 --> 00:03:58,930 So, with update command, we'll be all up to date. 70 00:03:58,930 --> 00:04:03,650 Now, we just did a fresh install, so there's nothing to update at the moment. 71 00:04:03,650 --> 00:04:06,100 Finally, if you wanna be on the bleeding edge and 72 00:04:06,100 --> 00:04:10,560 start using the Sass features of tomorrow, today, take a look at how you can install 73 00:04:10,560 --> 00:04:13,340 the pre-released version of Sass in the teacher's notes.