Що таке SASS?

SASS, CSS, Веб-розробка · 17-2-2025

SASS – це препроцесор для CSS, яка дозволяє писати стилізований код швидше та ефективніше. SASS володіє потужними можливостями, які значно полегшують роботу з CSS. Однією з основних переваг SASS є можливість використання змінних, вкладеності та багатьох інших функцій, які полегшують написання та обслуговування CSS коду.

SCSS і SASS — це два різні синтаксиси одного препроцесора Sass (Syntactically Awesome Stylesheets), який розширює можливості CSS.

Використання змінних

Однією з переваг SASS є можливість використовувати змінні. Наприклад, ви можете оголосити змінну для кольору і потім використовувати цю змінну в усіх потрібних місцях коду. Це дозволяє легко змінювати значення змінної на одному місці і автоматично оновлювати її в усіх інших місцях.

Приклад коду зі змінними у SASS:

.navbar
  background: #333
  color: white

  a
    text-decoration: none
    &:hover
      color: yellow

Вкладеність

Ще однією корисною функцією SASS є вкладеність. Ви можете вкладати стилі один в одного, що робить код більш структурованим і легким для розуміння. Наприклад, ви можете вкладати стилі для певних елементів в рамках батьківського елемента.

Приклад коду з вкладеністю у SASS:

.container
  width: 100%
  max-width: 1200px
  margin: 0 auto

  .header
    background: #333
    color: white
    padding: 20px

    h1
      font-size: 24px
      text-transform: uppercase

  .content
    padding: 20px

    p
      font-size: 16px
      line-height: 1.5
      color: #555

    a
      color: blue
      text-decoration: none

      &:hover
        color: darkblue

Легше обслуговування коду

Завдяки змінним, міксінам, умовним конструкціям та іншим функціям SASS, ви можете значно скоротити кількість повторюваного коду та спростити обслуговування CSS на вашому веб-сайті. Всі ці можливості дозволяють створювати більш чистий, краще структурований та оптимізований код.

Загалом, SASS є потужним інструментом для роботи з CSS, який допомагає прискорити процес розробки веб-сайтів та зробити стилізацію більш організованою. За допомогою змінних, вкладеності та інших можливостей SASS ви зможете писати більш якісний CSS код, що значно спростить вашу роботу.