In the course, we will dive into preprocessors, but before that, we need to understand what problems they 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, developers created preprocessors, which are add-ons to CSS. 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 are 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 functions
- Generate styles
- Use visual nesting
- Work with conditional constructions
All this will allow you to write maintainable code and automatically translate it into plain CSS.
SASS or SCSS
If you look for information about SASS, you'll most likely see that both SASS and SCSS are a thing.
They look different, but they're both called SASS. It's confusing, right? 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:
.flex
display: flex
&.justify-center
justify-content: center
- SCSS. This syntax copies much of the syntax of normal CSS:
.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. It is closer to the usual CSS syntax, so you will be 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 a web view. It's a good idea to do more than just a bare minimum. Once you've completed the task, 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 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 pen and tell it to use the CSS preprocessor in the SASS settings.
Are there any more questions? Ask them in the Discussion section.
The Hexlet support team or other students will answer you.
- Article “How to Learn and Cope with Negative Thoughts“
- Article “Learning Traps“
- Article “Complex and simple programming tasks“
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.