// приклад змінної для фонового кольору,
// (ЗГІДНО З ПРАВИЛ ІМЕНА ЗМІННИХ ПОВИННІ ПОЧИНАТИСЬ З ЛІТЕРИ ПІСЛЯ ЗНАКУ "$")
$main-bg: #ooo;


// використання змінної для відображення фонового кольору
body {
background-color : $color
}

// приклад вкладеності в якому відбувається звернення до усіх span в блоці block
.block {
background-color : #fff
span {
color : red
}
}

// при копіюванні класів з методологією БЕМ елементи блоку відносяться до блоку та мають запис
.block {
&__body {
}
&__text {
}
}

// звернення до елементу .block у якого є клас .page__body
// вигляд у html class="block page__body"
// запис повинен бути без пробілів між класами
.block {
&.page__body {
}
}

// звернення до елементу коли у батівського блоку є клас .loaded
.block {
.loaded & {
}
}

// приклад запису медіазапиту для .block
.block {
background-color: #fff ;
@media (max-width: 767px;) {
background-color: #000 ;
}
}

.block {
background-color: #fff ;
position: relative ;
z-index: 2 ;
// приклад написання псевдокласу hover всередині медіазапиту
@media (any-hover: hover) {
&:hover {
background-color: #000 ;
}
}
// приклад написання before
&::before {
content: "" ;
display: inline-block ;
position: absolute ;
width: 100% ;
height: 100% ;
top: 0 ;
left: 0 ;
background-color: rgba(75, 74, 74, 0.3) ;
z-index: -1 ;
}
}

// приклад міксину для встановлення колірноїї теми для блоку чи елменту
@mixin blockTheme ($color, $bg-color) {
color: $color ;
background-color: $bg-color ;
}

// використання міксину
.block {
@include blockTheme ("#000")
// вказуємо потрібний колір який буде для шрифту та фону
}

//========================
// нижче код з коментарями для цього блоку
// Оголошення міксіна з ім'ям blockTheme, який приймає один аргумент - $color
@mixin blockTheme ($color, $bg-color) {
// Встановлюємо колір тексту елемента, до якого буде застосовано цей міксін
color: $color ;
// Встановлюємо колір фону елемента, до якого буде застосовано цей міксін
background-color: $bg-color ;
}
// Застосовуємо міксін blockTheme до елементів з класом .block
.block {
// Використовуємо директиву @include для включення міксіна blockTheme
// Передаємо "#fff" (чорний) як аргумент $color та "#000" (білий) як аргумент $bg-color в міксін
@include blockTheme ("#000, #fff")
}

//========================
// другий приклад міксину для бордеру та падінгу
// Оголошення міксіна з ім'ям borderAndPadding, який приймає два аргументи - $border та $padding
@mixin borderAndPadding ($border, $padding) {
// Встановлюємо рамку для елемента, до якого буде застосовано цей міксін
border: $border ;
// Встановлюємо відступи для елемента, до якого буде застосовано цей міксін
padding: $padding ;
}

// Застосовуємо міксін borderAndPadding до елементів з класом .block
.block {
// Використовуємо директиву @include для включення міксіна borderAndPadding
// Передаємо "1px solid black" як аргумент $border та "10px" як аргумент $padding в міксін
@include borderAndPadding ("1px solid black", "10px")


%black-theme {
background-color: #000 ;
color: #000 ;
}

.block {
@extend %black-theme ;
}


// в цьому прикладі ми беремо (наче примусово успадковуємо) стилі у елементу з класом .title
.block {
@extend .title ;
}

// однорядковий коментар котрий не потрапляє в css

/* багаторядковий коментар який потрапляє в css */

// підключення математичних вираховувань, потрібно додати @use "sass:math"; зверху коду
@function percent($num1, $num2) {
$rez: math.div($num1, $num2) * 100%
@return $rez ;
}

.block {
width: percent(300, 1200) ;
// відбувається обчислення (300/1200)*100=25%
}

// підключення математичних вираховувань, потрібно додати @use "sass:math"; зверху коду
@use "sass:math" ;

.block {
line-height: math.div(45,20) ;
width: 100 * 200 + px ;
}

// додавання затримки анімації до елементів за допомогою циклу
&__items {
&__item {
transform: translate(0px, 0px) ;
// цикл з 5-и повторень циклу
@for $i from 1 through 5 {
// $i назва змінної для циклу
&:nth-child (#{$i}) {
// #{$i} вказуєм змінну замість номеру елементу
animation-delay: #{($i - 1) * 0.2}s ;
// при кожному циклі буде множення номеру на 0.2
// (1*0.2=0.2) (2*0.2=0.4) ... Таким чином для першого елементу затримка буде 0.2s для другого 0.4s ...
}
}
}
}

// додавання затримки анімації до елементів звичайним способом
&__items {
&__item {
transform: translate(0px, 0px) ;
&:nth-child (1) {
transition-delay: 0.3s ;
}
&:nth-child (2) {
transition-delay: 0.6s ;
}
&:nth-child (3) {
transition-delay: 0.9s ;
}
&:nth-child (4) {
transition-delay: 1.2s ;
}
&:nth-child (5) {
transition-delay: 1.5s ;
}
}
}
// а тепер уявіть що таких елементів багато, більше 10-и і на скільки сильно @for спрощує написання коду