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.