Get Started with Scout-App5:23 with Guil Hernandez
Scout-App gets you up and running with Sass in just a few minutes, without any of the installation and command line usage that's normally required to use Sass.
[MUSIC] 0:00 Hi everyone, Guil here, a development instructor at treehouse. 0:05 In this workshop I'll teach you one of the quickest and easiest ways to set up a new 0:12 Sass in your front end web development projects with a tool called Scout-App. 0:16 Scout-App is a small and simple application that gets you up and 0:20 running with Sass in just a few minutes, without any of the installation and 0:23 command line usage that's normally required to use Sass. 0:28 For example, to install and 0:31 run the Sass preprocessor on your computer without a tool like Scout-App, 0:32 you would need a platform such as Node.js, or package managers like Homebrew and 0:36 Chocolatey, which usually involves using the command line. 0:40 With Scout-App, you process your .sass and .scss files without having to install Sass 0:44 on your computer and needing any knowledge of the command line. 0:48 In fact, the Sass docs even recommend Scout-App as an alternative to 0:51 installing and running Sass on the command line. 0:56 Scout-App is a free and open source desktop application available for Mac, 0:59 Windows and Linux. 1:04 To download Scout-App, visit scout-app.io, then scroll down to the Download 1:05 section and click on your operating system, to begin downloading the app. 1:09 Scout-App runs the Sass compiler in a self-contained environment. 1:16 So the only step required to run Sass is to point Scout-App to your project. 1:20 When you launch the app from your desktop you're presented with the different ways 1:24 to import your Sass project. 1:28 For example, simply drag your Sass project folder into the Import Projects area or 1:29 click the Add a Project button and select the project folder to import. 1:34 Now the easiest way is with the drag and drag feature, so that's what I will use. 1:39 If you need a Sass project to help you follow along with this workshop, 1:42 be sure to download the project files with this video. 1:46 If you're new to Sass, setting up Sass to watch your input files and 1:48 compile any changes to CSS can be tricky. 1:52 You have to type Sass watch commands in your terminal or console that are specific 1:55 to your project structure to get the compiler to work correctly. 1:59 Well Scount-App is quite smart and 2:02 hassle-free because it automatically detects your input as CSS or 2:04 Sass folder and output CSS folder when you import a project. 2:08 For example, the input path points to the SCSS folder in my project, 2:11 and output points to the CSS folder. 2:17 Now be sure that both the input and output folder paths are specified. 2:20 Otherwise Scout-App will not be able to run your Sass project. 2:24 And you can also change the folder paths manually using the folder icon next to 2:27 each path. 2:32 And you don't even need to have a .css file in your CSS folder to start, 2:33 Scout-App will generate one for you. 2:37 And that's really all there is to it. 2:40 I'm ready to use Sass. 2:42 To begin watching your source files for changes and compile them to CSS, 2:44 click on the play icon next to your project's name. 2:49 If all compiles successfully, you should see a green success 2:52 notification appear to let you know that all went okay. 2:56 Each time you save your SCCS file in your editor, 3:00 Scout-App automatically updates the CSS file. 3:03 So let's test a few file changes. 3:06 I have my project open in Visual Studio Code, and 3:08 I'll make a change in the style.scss file, for 3:11 example change the header height to 800 pixels, then save the file. 3:15 Scout-App lets me know that everything compiled successfully. 3:20 And if I view the compiled CSS, I see the change. 3:24 Now that everything's up and running correctly, 3:28 I'll switch over to Scout-App to select my environment and CSS output style. 3:30 For example, when you choose the development environment, 3:34 the output style options are nested and expanded. 3:38 This for example is what the expanded style looks like. 3:41 The development environment also generates a style.map file or 3:45 source map when you run your project, which makes it easier to debug your 3:49 compiled CSS using the browser's developer tools. 3:53 When you're ready to take your compiled CSS to production, 3:56 select the Production environment. 4:00 And you'll usually want to choose the Compressed style, because it will minify 4:02 or compress the output CSS so that it loads faster in the browser. 4:07 Scout-App also lets you know about errors in your code, which is helpful. 4:15 It's common to make typos or forget to include syntax requirements like a closing 4:18 curly brace, colon or semicolon when coding. 4:23 So if you make a mistake, Scout-App displays an error notification letting 4:26 you know what went wrong and the faulty line of code in your source SCSS file. 4:32 Finally, to stop running the Sass compiler on your project, 4:42 click the stop button next to your project name. 4:46 There's more you can do in Scout-App, like control line endings in your CSS output. 4:48 You can import multiple Sass projects at once and 4:54 see the status of all projects at a glance. 4:58 You can also set preferences for notifications, 5:02 like turn off default sounds for success and error messages. 5:05 As well as window, language and theme preferences. 5:09 I'll leave you to explore those features on your own. 5:12 So I hope that by getting to know Scout-App you'll have a faster and 5:15 more streamlined way to run and manage your Sass projects. 5:18 Thanks everyone, and happy coding. 5:21
You need to sign up for Treehouse in order to download course files.Sign up