How to write cleaner CSS and rational SASS

Sass has earned a reputation among interface developers by translating sophisticated CSS into reasonable reusable code. This is undoubtedly important for scaling and support, and allows developers to eliminate the flaws presented in traditional CSS.

Two of the most important Sass functions are impurities and inheritance. Although they are usually grouped because of their ability to generate additional styles, each of them offers a unique approach to solving common CSS problems.

When developing experience using Sass, the key point is understanding when to use impurities or inheritance. But impurities and inheritances are by no means exceptional functions, and if used together, they can provide cleaner and more comprehensible markup. To better understand how these two functions can work together, let's start by looking at their unique behavior in more detail.

')

Modest admixture

Impurities are the main “bricks” for building Sass. Simply wrap a group of properties or selectors in an impurity, and the code can be reused by turning on the impurity a little later.
One-time writing of a common code allows you to make further changes in one place - a key participant in the DRY methodology. This example of button impurity contains the border property, which is then used by various classes of buttons:

SCSS

@mixin button { border-radius: 4px; border: 4px solid black; } .search-button { @include button; background-color: blue; } .cancel-button { @include button; background-color: red; } 

CSS

 .search-button { border-radius: 4px; border: 4px solid black; background-color: blue; } .cancel-button { border-radius: 4px; border: 4px solid black; background-color: red; } 

To generate unique CSS for each class, include the mixture in the values ​​of each argument:

SCSS

 @include button('search', blue); @include button('cancel', red); 

CSS

 .search-button { background-color: blue; border-radius: 4px; border: 4px solid black; } .cancel-button { background-color: red; border-radius: 4px; border: 4px solid black; } 

Even in this small example, it is easy to see the Sass efficiency increase.

Negative aspects and duplication

Although it is easiest to use impurities for repeating CSS blocks, this is not always the most sensible solution. The CSS output generated by impurities now contains two classes with the same border property.
If you constantly use impurities in this way, it will cause the CSS to swell from a lot of duplicate code. Fortunately, we can use inheritance to find places where impurities will be redundant.

We "dry" the code with the help of inheritance

The inheritance function allows classes to inherit all the properties of another class by grouping selectors. Instead of duplicating CSS every time an impurity does it, the selector is grouped with a class that it inherits:

SCSS

 .button { border-radius: 4px; border: 4px solid black; } .search-button { @extend .button; background: blue; } 

CSS

 .button, .search-button { border-radius: 4px; border: 4px solid black; } .search-button { background: blue; } 

Now our output has only one border property value that our buttons support.

Happy together

The approach using only impurities inflates the code, because every time we cause an impurity, we, unwittingly, duplicate the properties of the border. Instead of inscribing such common properties directly into an admixture, we can inherit the existing class into which they belong, reducing the amount of duplicated code:

SCSS

 .button { border-radius: 4px; border: 4px solid black; } @mixin button($name, $background-color) { .#{$name}-button { background-color: $background-color; @extend .button; } } @include button('search', blue); @include button('cancel', red); 

Classes that inherit the general properties of a button are grouped with the .button class, which eliminates duplication of border properties.

CSS

 .buton, .search-button, .cancel-button { border-radius: 4px; border: 4px solid black; } .search-button { background-color: blue; } .cancel-button { background-color: red; } 

This combination of impurity and inheritance can be used to generate a large number of buttons, thereby reducing the amount of duplicate CSS.

Looking for a happy medium

Reasonable use of impurities and inheritance has led to the creation of several notable Sass modules, but do not forget to check the CSS output all the time. Sass is not a panacea for every CSS problem, so certain skills are required to achieve the desired result.

Experiment with different techniques and see how these functions can be intertwined, creating powerful impurities and clean style sheets. The presence of an active Sass audience means that there are always new ideas that can be explored, explored and supplemented.