Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

Installing and Using Sass

2:09 with Guil Hernandez

You can find implementations of Sass written in programing languages like Java, Python, PHP, JavaScript and others. The original Sass was written in the Ruby programming language, so installing via a Ruby gem is one the most common ways to get Sass up and running on your machine.

Sass Update

Ruby Sass was the original implementation of Sass, but it's since been deprecated. It's currently in a sunset maintenance period, and it will be officially unmaintained one year after the release of Dart Sass 1.0.0. Ruby Sass users should migrate to another implementation.
Read more about Dart Sass in the React docs.

Installation Guides

Resources

  • 0:00

    Sass runs on Windows, Mac, and Linux machines.

  • 0:03

    Eventually you'll want to install Sass on your own computer, but for this course,

  • 0:06

    you don't have to.

  • 0:07

    We've already installed Sass in the workspaces associated with this course.

  • 0:11

    So to follow along, launch the workspace with this video.

  • 0:14

    However, if you do wanna follow along with your own text editor, you should download

  • 0:17

    the project files from this page and install Sass on your computer.

  • 0:21

    I've provided notes on how to install Sass on Windows and

  • 0:23

    Mac in the teacher's notes with this video.

  • 0:26

    But before we start, it's important you know that the Sass preprocessor

  • 0:30

    allows two different syntaxes.

  • 0:32

    There's the Sass syntax, also known as the indented syntax, and

  • 0:36

    it's the original syntax of Sass, and SCSS, known as Sassy SCC.

  • 0:40

    This is the latest generation of Sass.

  • 0:43

    To see the differences between the two syntaxes,

  • 0:45

    have a look at the files in your workspace.

  • 0:47

    Notice how one file uses the .sass extension and the other, .scss.

  • 0:54

    Open input.sass,and you'll see why it's called the indented syntax.

  • 0:59

    Notice how it's like CSS without any of the curly braces and semicolons.

  • 1:03

    Instead, it uses strict indentation to specify each declaration in a rule.

  • 1:09

    Open input.scss and you should see a more familiar syntax.

  • 1:13

    It's the usual CSS syntax you know and love.

  • 1:15

    CSS is fully compatible with the syntax of SCSS.

  • 1:20

    That's why it's the most popular of the two syntaxes and

  • 1:22

    the one we'll use in this course.

  • 1:24

    Because you don't have to change the way you write CSS.

  • 1:26

    By just writing plain CSS syntax inside a .scss file,

  • 1:31

    you're writing totally valid SCSS.

  • 1:33

    In fact, you could change a style sheet extension from .css to .scss and

  • 1:38

    it will just work.

  • 1:40

    Off you'll go using Sass.

  • 1:41

    However, keep in mind that the indented

  • 1:44

    Sass syntax is not compatible with CSS syntax.

  • 1:48

    So if you try to write regular CSS inside a .sass file,

  • 1:52

    the code will produce errors.

  • 1:54

    Even though we're using a CSS-friendly syntax here in input.scss,

  • 1:58

    the browser still doesn't understand this file written in SCSS.

  • 2:02

    So we need to translate or compile this code into a regular CSS file.

  • 2:06

    I'll teach you how to do that in the next video.

You need to sign up for Treehouse in order to download course files.

Sign up