Documente Academic
Documente Profesional
Documente Cultură
Ricardo Zea
Full‐Stack Designer http://ricardozea.design — Smashing Magazine Author: https://www.smashingmagazine.…
May 12, 2014 · 7 min read
If you’re a beginner in Sass, this detailed tutorial is for you. I really hope
you enjoy it, I spent a few days working on it to create a compelling and
useful message.
After trying to install Sass three times in a span of about 3-4 months, I
was finally able to “crack the code”. Now, here I am showing you how to
do it 😉.
So what makes this guide different from aaaaalll other guides out
there? It’s different because I’m going to explain it to you the way I
would’ve liked to have seen it explained to me back then, when I had no
clue about command line crap (and I still don’t to be honest).
This is a:
A. Simple Guide
B. With simple Steps
C. In human language
Here we go 🚀!
WTF is Ruby? 😕
Ruby is the technology or programming language Sass is built on. So you
need to install Ruby first so Sass can then run on top of it. 😌
3. Type the following command in the CMD (it doesn’t matter which
folder you’re in):
gem install sass
Command to install Sass
WTF is a gem 😕?
A gem is piece of software or app made to run on Ruby. It’s like… installing
an addon on Firefox or an extension on Chrome 😌.
It’ll take a few seconds to install Sass. At the end you’ll see this (the Sass
version may very well be different now though):
Successfully installed sass3.3.7
1 gem installed
Installing ri documentation for sass3.3.7…
Installing RDoc documentation for sass3.3.7…
Yeah, I know it looks “doh!” and simple but believe me, there were no
screenshots of anything back then and most of the installation tutorials
were for Macs.
So hopefully someone can find these steps useful and clear as they need
to be.
Don’t know what the PATH is? No problem, read this post I created
exactly for this moment 😉: The effin’ PATH demystified (Windows).
. . .
Steps to use Sass
Ok, what I’m about to show you is COMPLETELY different than what
any other Sass tutorial out there tells you to do.
2. Inside that folder create two sub folders: /css and /scss
Like this:
Notice the file extension .scss? This is your Sass file 😊. And yes, right
now there’s nothing in it, it’s empty.
II. From your file manager drag & drop the /Demo folder into the CMD
window.
sass watch scss:css
Like this:
The “--watch” flag tells Sass to “pay attention” to the folders /scss and
/css, so when you make changes to the .scss file (demo-styles.scss) Sass will
detect the change and compile the SCSS file into the final CSS file you’re
going to use on your website or app 👍.
All tutorials I’ve read make you watch specific files, like this:
sass watch styles.scss:styles.css
…which is Ok. I just think that watching folders is easier and makes
more sense because you’re watching ALL FILES in both directories
rather than specific ones, and saves you having to type too much in the
CMD as well.
6. Edit the .scss file and watch Sass compile it into a .css file
Like this:
Sass compiling a .scss Ûle to .css
Note: As you can see I’m writing basic CSS, not Sass because what I’m
trying to show you here is how the .css file is compiled.
Final Words
Yeah, post a little longer than others but I think the clarity in the steps
makes it worth it.
As far as how to write Sass, there are plenty of articles out there, I can
recommend this one: Beginner Guides & Tutorials on Sass and
Compass and this one: Getting Started with Sass.
If you’re interested in another ‘simple & friendly’ post about the pure
basics of Sass, drop me a message.
—
Ricardo.