CSS-препроцесори – це надбудови над CSS, спеціальні скрипти, які розширюють можливості CSS та спрощують процес створення стилів, що потім вбудовуються в CSS файли. Препроцессори надають можливість використовувати змінні, умовні оператори, цикли та інші зручні функції, які відсутні в звичайному CSS.
Variable (Змінні)
- SCSS: $color: red;
- LESS: @color: red;
- Stylus: $color = red
Nesting (Вкладеність)
- SCSS: .parent { .child { … } }
- LESS: .parent { .child { … } }
- Stylus: .parent { .child { … } }
Mixins (Міксини)
- SCSS: @mixin mixin-name($param) { … }
- LESS: .mixin-name(@param) { … }
- Stylus: mixin-name($param) { … }
Import (Імпорт)
- SCSS: @import "file";
- LESS: @import "file";
- Stylus: @import "file"
Inheritance (Успадкування)
- SCSS: @extend .class-name;
- LESS: .class-name:extend(.base-class) { … }
- Stylus: .class-name:extend(.base-class) { … }
Operators (Оператори)
- SCSS: +, -, *, /, %
- LESS: +, -, *, /, %
- Stylus: +, -, *, /, %
Control Flow (Управління потоком)
- SCSS: @if, @else if, @else, @for, @each, @while
- LESS: & when, & otherwise, @for, @each, @while
- Stylus: if, else if, else, for, each, while
Functions (Функції)
- SCSS: darken($color, 10%), lighten($color, 20%), mix($color1, $color2), etc.
- LESS: darken(@color, 10%), lighten(@color, 20%), fade(@color, 50%), etc.
- Stylus: darken($color, 10%), lighten($color, 20%), mix($color1, $color2), etc.
Comments (Коментарі)
- SCSS: // Single-line та /* Multi-line */
- LESS: // Single-line та /* Multi-line */
- Stylus: // Single-line та /* Multi-line */
Escaping (Екранування)
- SCSS: #{variable}
- LESS: @{variable}
- Stylus: {variable}
Interpolation (Інтерполяція)
- SCSS: #{$variable}
- LESS: @{variable}
- Stylus: #{variable}
Loops (Цикли)
- SCSS: @for $i from 1 through 3 { … }
- LESS: .-each(@i; 1; 3) { … }
- Stylus: for $i in 1 2 3 { … }
Selectors (Селектори)
- SCSS: .class-name { … }
- LESS: .class-name { … }
- Stylus: .class-name { … }
Давайте розглянемо приклади коду на SCSS, LESS та Stylus для створення кнопки з використанням змінних.
$button-color: #007BFF;
.btn {
background-color: $button-color;
border: 1px solid darken($button-color, 10%);
color: white;
padding: 10px 20px;
text-align: center;
display: inline-block;
cursor: pointer;
}
### LESS
```less
@button-color: #007BFF;
.btn {
background-color: @button-color;
border: 1px solid darken(@button-color, 10%);
color: white;
padding: 10px 20px;
text-align: center;
display: inline-block;
cursor: pointer;
}
button-color = #007BFF
.btn
background-color button-color
border 1px solid darken(button-color, 10%)
color white
padding 10px 20px
text-align center
display inline-block
cursor pointer
Замість того, щоб копіювати та вставляти значення кольорів кілька разів, ви можете використовувати змінні, що спрощує зміну кольорів та забезпечує консистентність.
$primary-color: #007BFF;
$secondary-color: #6C757D;
.button-primary {
background-color: $primary-color;
color: white;
}
.button-secondary {
background-color: $secondary-color;
color: white;
}
@margin-base: 16px; /* Базове значення відступу */
@margin-small: @margin-base / 2; /* Змінна, яка використовує значення базового відступу */
@margin-medium: @margin-base * 1.5; /* Змінна, яка використовує значення базового відступу */
@margin-large: @margin-base * 2; /* Змінна, яка використовує значення базового відступу */
.container {
margin: @margin-base; /* Використання базового значення відступу */
}
.section {
margin: @margin-medium @margin-large; /* Використання різних змінних відступів */
}
.button {
margin: @margin-small; /* Використання змінної відступу */
}
Це приклад використання змінних відступів у LESS-файлі. Ми визначаємо базове значення відступу (@margin-base) і використовуємо його для обчислення інших змінних відступів, таких як @margin-small, @margin-medium та @margin-large. Потім ми використовуємо ці змінні відступів у різних стилевих правилах, таких як margin для різних елементів, таких як .container, .section та .button.
Після компіляції LESS-файлу в CSS, значення змінних відступів будуть замінені на відповідні числові значення, які можна використовувати на веб-сторінці для відображення відступів. Використання змінних відступів дозволяє зручно налаштовувати відстані між елементами веб-сайту з одного місця, що робить розробку більш гнучкою та легко підтримуваною.
При виборі препроцесора враховуйте наступні фактори:
CSS-препроцесори стали невід'ємною частиною сучасної front-end розробки, допомагаючи розробникам створювати ефективний, модульний та легко підтримуваний код. SCSS, LESS та Stylus – трійка лідерів серед препроцесорів, кожен з яких має свої переваги та недоліки. Важливо обрати той, який найкраще підходить для ваших потреб та стилю роботи.
Оволодіння препроцесорами може суттєво покращити ваші навички та продуктивність у роботі з CSS. Навчіться використовувати змінні, умовні оператори, цикли, міксіни та інші корисні функції для створення чистого, структурованого та гнучкого коду. Це полегшить вашу роботу та допоможе вам розвивати професійні навички як front-end розробника.
Якщо ви тільки починаєте шлях розробника, вивчити кращі практики ви можете на нашому безкоштовному курсі Front End.
Пам'ятайте, що відпрацювання навичок та вивчення нових інструментів вимагає часу та практики. Не засмучуйтесь, якщо вам потрібно більше часу, ніж ви очікували, адже кожен крок вперед робить вас кращим розробником. Тож продовжуйте досліджувати світ препроцесорів та насолоджуйтесь новими можливостями, які вони пропонують вам у вашій front-end розробці!