Register to get access to free programming courses with interactive exercises

Introduction SASS: Fundamentals of Operations

Before we dive into the subject of preprocessors, we need to understand what problems they're meant to solve. CSS is a rather complicated language because you can't nest selectors, it's impossible to inherit styles between different selectors, and at one point, there weren't even variables. Even though there are variables, the lack of nesting, functions, and inheritance makes CSS code hard to read and unnecessarily cumbersome.

To solve these problems, preprocessors, which are add-ons to CSS, were created. This is important because the preprocessors themselves won't let you do anything you can't already do in CSS. When all is said and done, the preprocessor code files will be converted to a regular file with a .css extension.

In this course, we'll study the popular SASS preprocessor, which we'll use to teach you:

  • Not to duplicate code.
  • Use patterns.
  • Create your own functions.
  • Generate styles.
  • Use visual nesting.
  • Work with conditional constructions.

All this will allow you to write maintainable code that will automatically translate into plain CSS.

SASS or SCSS

If you go looking for information about SASS, you'll most likely see that both SASS and SCSS are a thing. Even though they look different, they're both called SASS. It's quite confusing. Actually, when we're talking about the preprocessor, it's called SASS, but you can write in it using one of two syntaxes:

  • Sass. This syntax doesn't use curly brackets or semicolons. There are more differences, but you can read more about them in the documentation.
  • SCSS. This syntax copies much of the syntax of normal CSS.

Compare the two chunks of code:

Sass

.flex
  display: flex

  &.justify-center
    justify-content: center

SCSS

.flex {
  display: flex;

  &.justify-center {
    justify-content: center;
  }
}

Both of these options will compile the same code:

.flex {
  display: flex;
}

.flex.justify-center {
  justify-content: center;
}

In this course, we'll use SCSS syntax, which is closer to the usual CSS syntax. It'll keep you less confused during your first steps in learning the SASS preprocessor.

Practice

Many of the lessons in this course will include a practice section with web view. It's a good idea to do more than just complete the task. Once you've completed the task successfully, try experimenting with the code and the features you've learned.

During the course, you'll come across independent assignments. If necessary, you can practice in the tasks you find in the assignments

CodePen

Another opportunity to apply the skills learned in the course is to use the CodePen service. You can create your own pen and tell it to use the CSS preprocessor in the SASS settings.


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.