Simple Sass Compiling
If you’ve been writing your own HTML and CSS for a while, you’ll know that the larger the project, the more difficult it can be to keep your CSS nice and organized. Maybe you’ve done some online tutorials to learn Sass (short for syntactically awesome style sheets), but how do make the jump from in-browser tutorials to using it in your own projects?
Compile? I Thought CSS was Front-End!
Once you have your
.scss file written, you’re not quite ready to upload to the server.
Since Sass is not understood natively by the browser, first it needs to be converted to format that
can be read. This step is called preprocessing. When you use a preprocessor on an
file, it takes that file and compiles it into a regular
.css file which can be read by
just as if you had written it by hand.
.css file is the one you upload and link to in your HTML.
The preprocessing step can be done in one of two main ways: either via the command line, or by using an application to handle it for you.
When installing Sass on the command line, you will need some familiarity using Node.js and npm or another package manager such as Homebrew for Mac. For beginners this can be intimidating and really slow things down when all you want to do is try out some styling using Sass. Luckily, there is another option.
There are a number of applications (paid or free) that can be used to compile your Sass without
opening the terminal. Some, like CodeKit, are
more all-in-one solutions that in addition to
preprocessing Sass can also do post-processing tasks such as running Autoprefixer or Babel. But if you
want something simple for your Sass experiments, Scout-App is a free tool for Windows, Mac and Linux
that does one thing: it watches for changes in your
.scss files and compiles them to
.css on save.
Walkthrough Using Scout-App
- Download Scout-App from https://scout-app.io/
- Click the Add a Project button
- Choose your Input Folder (the location of your
- Choose your Output Folder (where the
- Select your desired Environment settings (for example, compact the CSS for production)
- Click the blue triangle to run.
Now whenever you save the
.scss file, Scout will automatically compile it into
Go Forth and Be Sassy!
If you are just getting your feet wet in the world of CSS preprocessors, you don’t have to take a
detour and become an expert on npm if you’re not ready for it. Thanks to some GUI applications, the
benefits of writing
.scss are within your reach for your own learning and personal