Organization of buttons on the site using Sass

Quite often, our favorite designers make buttons in the layouts of different sizes and sizes, some of which are repeated, some are not. It would be nice to organize a system for quickly adding and editing these buttons, in which sass @ extend's can help. I will give a small illustration of the buttons in a typical project.

How not to do

HTML for our buttons will be the same throughout the article:

<ul class="about_butt_list"> <li class="about_butt_item"><a href="#" class="about_butt blue_mod"></a></li> <li class="about_butt_item"><a href="#" class="about_butt red_mod"></a></li> <li class="about_butt_item"><a href="#" class="about_butt yellow_mod"></a></li> </ul> 

The first thing that can come up with the coder is to write the styles for the buttons immediately to the classes of our elements.
')
SCSS:

 .about_butt { display: block; height:50px; line-height: 50px; text-align: center; font-family: 'intro'; font-size: 12px; } 

We wrote styles for our main class, now we will make its modifications by color (variables are used for color for convenience):

 .about_butt { display: block; height: 50px; line-height: 50px; text-align: center; font-family: 'intro'; font-size: 12px; &.blue_mod { background: $blue_1; color: $white; transition: background .3s ease; &:hover, &:focus { text-decoration: none; } &:hover { background: lighten($blue_1, 5%); } } &.red_mod { background: $red_1; color: $white; transition: background .3s ease; &:hover, &:focus { text-decoration: none; } &:hover { background: lighten($red_2, 5%); } } &.yellow_mod { background: $yellow_1; color: $white; transition: background .3s ease; &:hover, &:focus { text-decoration: none; } } } 

So far, everything is simple and understandable. But on the next page, this button appears:



This button has the same dimensions as the previous one, but a different design. Let's break the DRY principle and copy the styles for it from our previous buttons:

 .news_more_butt { display: block; height:50px; line-height: 50px; text-align: center; font-family: 'intro'; font-size: 12px; } 

Determined with the size, let's add a design:

 .news_more_butt { color:$black_2; background: transparent; box-shadow:inset 0 0 0 2rem $gray_4; transition:all .3s ease; &:hover,&:focus { text-decoration: none; } &:hover { background: $gray_4; color:$white; } } 

Well, a few styles for placing our buttons:

 .news_more_butt { width: 186px; margin: 20px auto; } 

Go ahead and on the other page we meet the following button:



The design remains the same, but the button and font sizes have changed. And here we have two paths:

1. Continue to copy styles for different buttons and give them unique classes.
2. Make special classes for design and add it to our tags.

The disadvantages of each of these approaches are obvious. In the first, we copy too much code, and when you need to change something, you need to change it in several places. In the second, we add presentation classes, and this is also not very good (Bootstrap lovers would argue).
But there is a third way - using sass @extend (although this can be implemented in any preprocessor).

Third way

I have impurities in a separate scss file - buttons.scss, which is extremely convenient. We will divide them into sizes (+ typography) and color schemes. We write classes for sizes:

 %butt_size_1 { display: block; height:50px; line-height: 50px; text-align: center; font-family: 'intro'; font-size: 12px; } %butt_size_2 { display: block; height:70px; line-height: 70px; text-align: center; font-family: 'intro'; font-size: 16px; } 

Great, and now the color schemes:

 %butt_gray_1 { color: $black_2; background: transparent; box-shadow: inset 0 0 0 2rem $gray_4; transition: all .3s ease; &:hover, &:focus { text-decoration: none; } &:hover { background: $gray_4; color: $white; } } %butt_blue_1 { background: $blue_1; color: $white; transition: all .3s ease; &:hover, &:focus { text-decoration: none; } &:hover { background: lighten($blue_1, 5%); } } %butt_red_1 { background: $red_2; color: $white; transition: all .3s ease; &:hover, &:focus { text-decoration: none; } &:hover { background: lighten($red_2, 5%); } } %butt_yellow_1 { background: $yellow_1; color: $white; transition: all .3s ease; &:hover, &:focus { text-decoration: none; } &:hover { background: lighten($yellow_1, 5%); } } %butt_green_1 { background: $green_1; color: $white; transition: all .3s ease; &:hover, &:focus { text-decoration: none; } &:hover { background: lighten($green_1, 5%); } } 

So we got a flexible system for organizing our buttons. Now our scss will look like this:

 .about_butt { @extend %butt_size_1; &.blue_mod { @extend %butt_blue_1; } &.red_mod { @extend %butt_red_1; } &.yellow_mod { @extend %butt_yellow_1; } } .news_more_butt { @extend %butt_size_1; @extend %butt_gray_1; width: 186px; margin: 20px auto; } .show_news_butt { @extend %butt_size_2; @extend %butt_gray_1; display: inline-block; } 

If there is a new color scheme - we just do @extend for it and use it, if the current one changes - we swear at the designer rule in one place.

Key points

• Use silent classes, not mixins (less resulting CSS)
• If you have a single-page site with a small number of buttons, this system will be superfluous
• In silent classes, display: block is declared, then it can be rewritten in the selector rule

PS: This system was developed by Andrey Boyko , for which he thanks a lot!