Top 5 practices to make using Sass easier
Posted: Tue Jan 21, 2025 6:27 am
1. Create a clear and easy-to-manage Sass structure
Let's be honest, chaos and mess are some of the most difficult factors to work with. We can lose a lot of valuable time to find, for example, a file that interests us in a complex project that may contain hundreds or even thousands of files. At some point, we can really get lost and wonder where we saved a given file. However, there is a simple way to prevent this... All we have to do is introduce a folder structure! For example, we can store all mixins and variables in the "utils" folder, separate styles for other subpages in "pages", etc. At first glance, this seems like a funny and insignificant matter, but take our word for it, it will greatly improve work on Sass projects, especially the larger ones! To use these files, all we have to do is place "@import 'directory/file_name" in our main .scss file;
Sass structure
2. Reduce nesting in Sass
Unfortunately, everything has its two sides, and nesting is no different. It is a great convenience, because we operate according to the DRY (Don't Repeat Yourself) rule, but its overuse can become an unnecessary complication for us. At this point, the question arises, why use something that Sass introduced to make our lives easier with caution? First of all, the code becomes increasingly difficult to read, especially for someone who is not familiar with our code. In addition, very complicated and too specific selectors are created, which completely contradicts the KISS (Keep it Simple, Stupid) rule. This opens the way for more typos and the need to open different elements multiple times if you want to change the name of a component. So remember, DRY KISS !
Nesting in Sass
3. Use variables wisely in Sass!
It seems like an obvious thing, but not entirely correctly used by everyone, variables. Each of us in Sass has happened to create variables that stored, for example, color. How did we call them in most cases? With the name of the color... We should name our variables less generally, in this case it is better to focus on the specifics! Let's try to stick to the conventions afghanistan telemarketing data of the BEM methodology . What does it mean? In short, we use such naming that will be most informative for the programmer. As an example, we can use the main container. We would like to set its font and background color:
Variables in Sass
This allows us to use a general term for our variable in stylesheets, while still leaving the variable declaration in one place so we can save time changing it later if needed.
4. Avoid repeating Sass Mixins
Mixins allow us to easily reuse styles. They can contain their own style rules, which can be nested within other rules, and can be used to modify variables. However, using them incorrectly introduces a lot of repetition into the code, creates a lot of duplicate code, and can cause the CSS file to grow. The question is, how do we use them correctly? This is where arguments come in handy. For example, if we wanted to create a mixin for buttons in Sass, we could use two arguments, $size and $arc:
Mixin
We can initialize this mixin as follows:
Using Mixin
5. Sass allows you to nest the @media rule. Make sure to use it!
As a rule, @media rules are placed at the very end of the css file, where each rule modified specific classes for a given, e.g. resolution. We can make things easier for ourselves and place @media rules in the classes we are interested in. It is recommended that they are not nested inside each selector. This will make our work easier, the code will be more readable and, incidentally, it will save a lot of time because we will not have to scroll to the very bottom of the file to change only one value for a given @media. We can simply do this easily in the selector we are interested in! How to do it? We present below using an example form:
@media rule
6.Summary
The above examples show how to make it easier to work with the Sass pre-processor. Thanks to them, we will be able to manage the structure of our project more easily, which will affect the greater pleasure of using it. The best thing is that these are practices that each of us can quickly learn, and using them on a daily basis will make our work much easier. One thing is for sure, in the future, when working on larger projects, we will definitely thank ourselves more than once for starting to act on these tips! Following these practices is crucial when implementing projects. If you need help with website design in Wrocław - we invite you!
Web Developer at the marketing agency RekinySukcesu.pl
Michael Chmiel
Web Developer at RekinySukcesu.pl - graduated in computer science from the University of Lower Silesia in Wrocław. Focuses on continuous development. To increase his competences, he takes part in many courses in the field of positioning and digital education. Privately, a passionate fan of motoring, especially the Japanese one, and an enthusiast of unusual music genres.
Read also
TOP 5 original Javascript courses and websites that will diversify your web development learning
CSS Grid - All You Need to Know If You Still Refuse to Use It
Apostolate of the Good Code
CSS Preprocessors - Why Do I Need Them? Introduction to Sass
React hooks - what are they and what are their uses?
Let's be honest, chaos and mess are some of the most difficult factors to work with. We can lose a lot of valuable time to find, for example, a file that interests us in a complex project that may contain hundreds or even thousands of files. At some point, we can really get lost and wonder where we saved a given file. However, there is a simple way to prevent this... All we have to do is introduce a folder structure! For example, we can store all mixins and variables in the "utils" folder, separate styles for other subpages in "pages", etc. At first glance, this seems like a funny and insignificant matter, but take our word for it, it will greatly improve work on Sass projects, especially the larger ones! To use these files, all we have to do is place "@import 'directory/file_name" in our main .scss file;
Sass structure
2. Reduce nesting in Sass
Unfortunately, everything has its two sides, and nesting is no different. It is a great convenience, because we operate according to the DRY (Don't Repeat Yourself) rule, but its overuse can become an unnecessary complication for us. At this point, the question arises, why use something that Sass introduced to make our lives easier with caution? First of all, the code becomes increasingly difficult to read, especially for someone who is not familiar with our code. In addition, very complicated and too specific selectors are created, which completely contradicts the KISS (Keep it Simple, Stupid) rule. This opens the way for more typos and the need to open different elements multiple times if you want to change the name of a component. So remember, DRY KISS !
Nesting in Sass
3. Use variables wisely in Sass!
It seems like an obvious thing, but not entirely correctly used by everyone, variables. Each of us in Sass has happened to create variables that stored, for example, color. How did we call them in most cases? With the name of the color... We should name our variables less generally, in this case it is better to focus on the specifics! Let's try to stick to the conventions afghanistan telemarketing data of the BEM methodology . What does it mean? In short, we use such naming that will be most informative for the programmer. As an example, we can use the main container. We would like to set its font and background color:
Variables in Sass
This allows us to use a general term for our variable in stylesheets, while still leaving the variable declaration in one place so we can save time changing it later if needed.
4. Avoid repeating Sass Mixins
Mixins allow us to easily reuse styles. They can contain their own style rules, which can be nested within other rules, and can be used to modify variables. However, using them incorrectly introduces a lot of repetition into the code, creates a lot of duplicate code, and can cause the CSS file to grow. The question is, how do we use them correctly? This is where arguments come in handy. For example, if we wanted to create a mixin for buttons in Sass, we could use two arguments, $size and $arc:
Mixin
We can initialize this mixin as follows:
Using Mixin
5. Sass allows you to nest the @media rule. Make sure to use it!
As a rule, @media rules are placed at the very end of the css file, where each rule modified specific classes for a given, e.g. resolution. We can make things easier for ourselves and place @media rules in the classes we are interested in. It is recommended that they are not nested inside each selector. This will make our work easier, the code will be more readable and, incidentally, it will save a lot of time because we will not have to scroll to the very bottom of the file to change only one value for a given @media. We can simply do this easily in the selector we are interested in! How to do it? We present below using an example form:
@media rule
6.Summary
The above examples show how to make it easier to work with the Sass pre-processor. Thanks to them, we will be able to manage the structure of our project more easily, which will affect the greater pleasure of using it. The best thing is that these are practices that each of us can quickly learn, and using them on a daily basis will make our work much easier. One thing is for sure, in the future, when working on larger projects, we will definitely thank ourselves more than once for starting to act on these tips! Following these practices is crucial when implementing projects. If you need help with website design in Wrocław - we invite you!
Web Developer at the marketing agency RekinySukcesu.pl
Michael Chmiel
Web Developer at RekinySukcesu.pl - graduated in computer science from the University of Lower Silesia in Wrocław. Focuses on continuous development. To increase his competences, he takes part in many courses in the field of positioning and digital education. Privately, a passionate fan of motoring, especially the Japanese one, and an enthusiast of unusual music genres.
Read also
TOP 5 original Javascript courses and websites that will diversify your web development learning
CSS Grid - All You Need to Know If You Still Refuse to Use It
Apostolate of the Good Code
CSS Preprocessors - Why Do I Need Them? Introduction to Sass
React hooks - what are they and what are their uses?