Preview
Video Player
00:00
00:00
Get Started with Scout-App
5:23Scout-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