Організація кнопок на сайті за допомогою Sass

Досить часто наші улюблені дизайнери роблять макетів кнопки різних розмірів і величин, деякі з яких повторюються, деякі ні. Непогано було б організувати систему для швидкого додавання і редагування цих самих кнопок, в чому можуть допомогти sass @extend's. Наведу невелику ілюстрацію кнопок в типовому проекті.



Як не треба робити

HTML для наших кнопок буде незмінним протягом всієї статті:

<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>

Перше, що може прийти в голову верстальщику — записати стилі для кнопок відразу в класи наших елементів.

SCSS:

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

Ми написали стилі для нашого основного класу, тепер зробимо його модифікації за кольором(для кольори використані змінні для зручності):

.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;
}
}

Поки все просто і зрозуміло.Але на наступній сторінці з'являється ось така кнопка:



Ця кнопка має ті ж розміри, що і попередні, але інше оформлення. Давайте порушимо принцип DRY і скопіюємо стилі для неї від наших попередніх кнопок:

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

З розмірами визначилися, давайте додамо оформлення:

.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;
}
}

Ну і трохи стилів для розміщення нашої кнопки:

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

Йдемо далі і на іншій сторінці зустрічаємо наступну команду:



Оформлення залишилося колишнім, а от розміри кнопки і шрифту змінилися. І тут перед нами два шляхи:

  1. Продовжувати копіювати стилі для різних кнопок і давати їм унікальні класи
  2. Зробити спеціальні класи для оформлення і додавати його в наші теги
Мінуси кожного з цих підходів очевидні. В першому ми копіюємо занадто багато коду, і коли потрібно що-небудь змінити — міняти треба в декількох місцях. У другому ми додаємо презентаційні класи, і це теж не дуже добре(любителі Bootstrap б заперечили).
Але є і третій шлях — використання sass @extend(хоча це можна реалізувати в будь-якому препроцессоре).

Третій шлях

У мене домішки лежать в окремому scss файлі — buttons.scss, це вкрай зручно.Ми будемо розділяти їх на розміри(+типографіка) і колірні схеми.Напишемо класи для розмірів:

%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;
}

Чудово, а тепер колірні схеми:

%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%);
}
}

Ось ми і отримали гнучку систему для організації наших кнопок.Тепер наш scss буде виглядати наступним чином:

.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: 186rem;
margin: 20rem auto;
}
.show_news_butt {
@extend %butt_size_2;
@extend %butt_gray_1;

display: inline-block;
}


Якщо з'являється нова колірна схема — ми просто робимо для неї @extend і використовуємо, якщо змінюється поточна — лаємося на дизайнера правимо в одному місці.

Ключові моменти

  • Використовуємо тихі класи, а не міксини(менше результуючого CSS)
  • Якщо у вас одне-сторінковий сайт з невеликою кількістю кнопок — дана система буде зайвою
  • В тихих класах оголошується display:block, потім це можна переписати у правилі селектора


P. S.: Дану систему розробив Андрій Бойко, за що йому величезне спасибі!

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.