Вивчайте Розуміння синтаксису Sass для кращого CSS

Щоб почати писати код на sass, необхідно створити файл з розширенням .scss. (наприклад, feature.scss).

Розглянемо синтаксис sass на основі наступного css-коду. Ми будемо працювати з кнопкою, яка матиме ефект при наведенні. Ось css-код для цього:

.button {
  font-size: 24px;
  color: green;
  background-color: rebeccapurple;
}

.button:hover {
  background-color: darkmagenta;
}

Перепишемо цей код із використанням синтаксису sass:

.button {
  font-size: 24px;
  color: green;
  background-color: rebeccapurple;
  
  &:hover {
    background-color: darkmagenta;
  }
}

Відмінність полягає в тому, що стилі для одного елемента розміщуються всередині першої пари дужок {}. Також ми не використовуємо ім'я класу елемента двічі. Замість цього застосовується амперсанд (&).

Примітка

У разі виникнення питань або непорозумінь щодо деяких можливостей sass, настійно рекомендується скористатися документацією sass.

Компіляція

Браузери не розуміють синтаксис препроцесорів. Вони розпізнають лише html, css та javascript. Як це працює? Необхідно скомпілювати sass-файл у css-файл. Після компіляції буде видно результат.

Маємо такі варіанти компіляції sass у css:

Використання розширення Visual Studio Code — Live Sass Compiler;
Використання додатку — Scout App.

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 7. Розділ 2

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

Can you explain more about the ampersand (&) in Sass?

What are some other common features of Sass?

How do I choose between the different Sass compilers?

Awesome!

Completion rate improved to 2.04

Свайпніть щоб показати меню