Register to get access to free programming courses with interactive exercises

Installing SASS: Fundamentals of Operations

SASS can be used in many situations. This can include:

  • an online environment that automatically converts code from SASS to CSS,
  • a package in your system (such as surge from the first project),
  • separate software that converts files from .sass/.scss to .css.

Let's deal with each point separately. During the course, you can use any option you're comfortable with. When working with real projects, it's better to install SASS as a package on your system. Then, using assemblers, you'll be able to automate compilation, i.e., the conversion of code from SASS to CSS.

Online environment

If you want to use SASS in an online environment, almost any online code editor you know will work. For example, CodePen. In the CSS tab, you can tell it to use the SASS preprocessor. For SCSS syntax, you need to select the appropriate drop-down menu item.

Using CodePen with SCSS

This is the easiest and fastest option for writing CSS code using the SASS preprocessor.

Another popular tool is the Sassmeister service. It allows you to quickly translate SASS code into plain CSS. The advantage of this service is the ability to select different types of compilers. This allows you to test your code under different conditions and possibly identify a few bugs you may encounter.

Software

You can install separate software that will compile preprocessor files into normal CSS. There are many such programs, and many of them are available for all major platforms (Windows, Linux, macOS). One common program is Koala. It's available for all major platforms, and its intuitive interface allows you to quickly understand how to compile preprocessor files.

Simply select the directory with your .scss, and Koala will automatically convert them to .css.

Koala SCSS

Installing SASS as a package

You can install SCSS as a normal npm-package on your system. This is the easiest and fastest way, allowing you to use SASS without installing additional software, and it doesn't require an Internet connection, as is the case with online services.

When installing SASS make sure you have Node.js installed. Open the terminal and run the following command:

sudo npm install -g sass

After installing Chocolatey run the following command:

choco install sass

Use the following command to install SASS on macOS:

brew install sass/sass/sass

After installing the package, the sass command will be available to you in the terminal. In its basic form, you only need to pass it two parameters:

  • The path to the input file. This is the .sass/.scss file on your system.
  • The path to the output file. Here, you can specify the path to the .css file, where all CSS will be written after compilation. You don't have to create this file beforehand. If it doesn't exist, the program will create it in the path you specified.
sass /project/src/style/style.scss /project/build/style/style.css

In addition to being able to compile, you'll also be able to run an interactive (shell). With it you can easily experiment with different SASS functions. To start the interactive shell, run the sass -i command in the terminal:

sass -i

>> 1px + 1px
2px

As you go through the course, you'll encounter different features. Try them in the interactive shell.

All examples and exercises in this course will be compiled using this library. The library is called Dart-SASS. This is important because different compilers can handle SASS code differently. The differences are insignificant, but it's worth trying to identify the differences when choosing a different library.

Additional materials

Additional assignment

Install SASS on your computer using a batch manager. Try creating a file with a .scss extension and compiling it. You can enter the following code in the scss file:

header {
  width: 50%;
  background: brown;

  &.w-100 {
    width: 100%;
  }
}

See what you get in the .css file after compilation.


Hexlet Experts

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs

From a novice to a developer. Get a job or your money back!

Layout Designer icon
Profession
New Under development beginner
Layout with the latest CSS standards
start anytime 5 months

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.