1 00:00:00,146 --> 00:00:05,459 [MUSIC] 2 00:00:05,459 --> 00:00:12,527 Hi everyone, Guil here, a development instructor at treehouse. 3 00:00:12,527 --> 00:00:16,521 In this workshop I'll teach you one of the quickest and easiest ways to set up a new 4 00:00:16,521 --> 00:00:20,480 Sass in your front end web development projects with a tool called Scout-App. 5 00:00:20,480 --> 00:00:23,924 Scout-App is a small and simple application that gets you up and 6 00:00:23,924 --> 00:00:28,005 running with Sass in just a few minutes, without any of the installation and 7 00:00:28,005 --> 00:00:31,219 command line usage that's normally required to use Sass. 8 00:00:31,219 --> 00:00:32,701 For example, to install and 9 00:00:32,701 --> 00:00:36,655 run the Sass preprocessor on your computer without a tool like Scout-App, 10 00:00:36,655 --> 00:00:40,918 you would need a platform such as Node.js, or package managers like Homebrew and 11 00:00:40,918 --> 00:00:44,220 Chocolatey, which usually involves using the command line. 12 00:00:44,220 --> 00:00:48,730 With Scout-App, you process your .sass and .scss files without having to install Sass 13 00:00:48,730 --> 00:00:51,947 on your computer and needing any knowledge of the command line. 14 00:00:51,947 --> 00:00:56,323 In fact, the Sass docs even recommend Scout-App as an alternative to 15 00:00:56,323 --> 00:00:59,812 installing and running Sass on the command line. 16 00:00:59,812 --> 00:01:04,102 Scout-App is a free and open source desktop application available for Mac, 17 00:01:04,102 --> 00:01:05,226 Windows and Linux. 18 00:01:05,226 --> 00:01:09,986 To download Scout-App, visit scout-app.io, then scroll down to the Download 19 00:01:09,986 --> 00:01:14,341 section and click on your operating system, to begin downloading the app. 20 00:01:16,239 --> 00:01:20,154 Scout-App runs the Sass compiler in a self-contained environment. 21 00:01:20,154 --> 00:01:24,572 So the only step required to run Sass is to point Scout-App to your project. 22 00:01:24,572 --> 00:01:28,373 When you launch the app from your desktop you're presented with the different ways 23 00:01:28,373 --> 00:01:29,742 to import your Sass project. 24 00:01:29,742 --> 00:01:34,767 For example, simply drag your Sass project folder into the Import Projects area or 25 00:01:34,767 --> 00:01:39,096 click the Add a Project button and select the project folder to import. 26 00:01:39,096 --> 00:01:42,965 Now the easiest way is with the drag and drag feature, so that's what I will use. 27 00:01:42,965 --> 00:01:46,119 If you need a Sass project to help you follow along with this workshop, 28 00:01:46,119 --> 00:01:48,586 be sure to download the project files with this video. 29 00:01:48,586 --> 00:01:52,675 If you're new to Sass, setting up Sass to watch your input files and 30 00:01:52,675 --> 00:01:55,197 compile any changes to CSS can be tricky. 31 00:01:55,197 --> 00:01:59,141 You have to type Sass watch commands in your terminal or console that are specific 32 00:01:59,141 --> 00:02:02,343 to your project structure to get the compiler to work correctly. 33 00:02:02,343 --> 00:02:04,397 Well Scount-App is quite smart and 34 00:02:04,397 --> 00:02:08,303 hassle-free because it automatically detects your input as CSS or 35 00:02:08,303 --> 00:02:11,809 Sass folder and output CSS folder when you import a project. 36 00:02:11,809 --> 00:02:17,210 For example, the input path points to the SCSS folder in my project, 37 00:02:17,210 --> 00:02:20,110 and output points to the CSS folder. 38 00:02:20,110 --> 00:02:24,661 Now be sure that both the input and output folder paths are specified. 39 00:02:24,661 --> 00:02:27,846 Otherwise Scout-App will not be able to run your Sass project. 40 00:02:27,846 --> 00:02:32,592 And you can also change the folder paths manually using the folder icon next to 41 00:02:32,592 --> 00:02:33,332 each path. 42 00:02:33,332 --> 00:02:37,933 And you don't even need to have a .css file in your CSS folder to start, 43 00:02:37,933 --> 00:02:40,475 Scout-App will generate one for you. 44 00:02:40,475 --> 00:02:42,665 And that's really all there is to it. 45 00:02:42,665 --> 00:02:44,434 I'm ready to use Sass. 46 00:02:44,434 --> 00:02:49,085 To begin watching your source files for changes and compile them to CSS, 47 00:02:49,085 --> 00:02:52,450 click on the play icon next to your project's name. 48 00:02:52,450 --> 00:02:56,521 If all compiles successfully, you should see a green success 49 00:02:56,521 --> 00:03:00,210 notification appear to let you know that all went okay. 50 00:03:00,210 --> 00:03:03,245 Each time you save your SCCS file in your editor, 51 00:03:03,245 --> 00:03:06,370 Scout-App automatically updates the CSS file. 52 00:03:06,370 --> 00:03:08,540 So let's test a few file changes. 53 00:03:08,540 --> 00:03:11,925 I have my project open in Visual Studio Code, and 54 00:03:11,925 --> 00:03:15,311 I'll make a change in the style.scss file, for 55 00:03:15,311 --> 00:03:20,368 example change the header height to 800 pixels, then save the file. 56 00:03:20,368 --> 00:03:24,361 Scout-App lets me know that everything compiled successfully. 57 00:03:24,361 --> 00:03:28,370 And if I view the compiled CSS, I see the change. 58 00:03:28,370 --> 00:03:30,950 Now that everything's up and running correctly, 59 00:03:30,950 --> 00:03:34,971 I'll switch over to Scout-App to select my environment and CSS output style. 60 00:03:34,971 --> 00:03:38,734 For example, when you choose the development environment, 61 00:03:38,734 --> 00:03:41,857 the output style options are nested and expanded. 62 00:03:41,857 --> 00:03:45,566 This for example is what the expanded style looks like. 63 00:03:45,566 --> 00:03:49,455 The development environment also generates a style.map file or 64 00:03:49,455 --> 00:03:53,765 source map when you run your project, which makes it easier to debug your 65 00:03:53,765 --> 00:03:56,962 compiled CSS using the browser's developer tools. 66 00:03:56,962 --> 00:04:00,544 When you're ready to take your compiled CSS to production, 67 00:04:00,544 --> 00:04:02,802 select the Production environment. 68 00:04:02,802 --> 00:04:07,495 And you'll usually want to choose the Compressed style, because it will minify 69 00:04:07,495 --> 00:04:11,304 or compress the output CSS so that it loads faster in the browser. 70 00:04:15,127 --> 00:04:18,856 Scout-App also lets you know about errors in your code, which is helpful. 71 00:04:18,856 --> 00:04:23,672 It's common to make typos or forget to include syntax requirements like a closing 72 00:04:23,672 --> 00:04:26,480 curly brace, colon or semicolon when coding. 73 00:04:26,480 --> 00:04:32,612 So if you make a mistake, Scout-App displays an error notification letting 74 00:04:32,612 --> 00:04:38,669 you know what went wrong and the faulty line of code in your source SCSS file. 75 00:04:42,441 --> 00:04:46,057 Finally, to stop running the Sass compiler on your project, 76 00:04:46,057 --> 00:04:48,920 click the stop button next to your project name. 77 00:04:48,920 --> 00:04:54,767 There's more you can do in Scout-App, like control line endings in your CSS output. 78 00:04:54,767 --> 00:04:58,694 You can import multiple Sass projects at once and 79 00:04:58,694 --> 00:05:02,154 see the status of all projects at a glance. 80 00:05:02,154 --> 00:05:05,377 You can also set preferences for notifications, 81 00:05:05,377 --> 00:05:09,376 like turn off default sounds for success and error messages. 82 00:05:09,376 --> 00:05:12,514 As well as window, language and theme preferences. 83 00:05:12,514 --> 00:05:15,440 I'll leave you to explore those features on your own. 84 00:05:15,440 --> 00:05:18,758 So I hope that by getting to know Scout-App you'll have a faster and 85 00:05:18,758 --> 00:05:21,680 more streamlined way to run and manage your Sass projects. 86 00:05:21,680 --> 00:05:24,031 Thanks everyone, and happy coding.