Вивчаємо sass. Стиль написання коду.

Відео: Sass - основи CSS препроцесора (variables, mixins)

Всім привіт! У цій статті ми поговоримо про різні способах написання Sass коду і про особливості кожного з них.

Якщо ви зайдете на офіційний сайт препроцесора, то побачите, що там є два формати: scss і sass. Давайте розглянемо кожен з них окремо.

SCSS

SCSS (Sassy CSS) - це формат, який найбільш сильно наближений до формату написання чистого CSS коду. Тут також є фігурні дужки, він розуміє більшість CSS-хаков і префіксів, допустимо написання значень CSS3 коду. Цей стиль найчастіше використовують новачки, тому що він дуже схожий на звичайний CSS код. Якщо ви бажаєте використовувати цей стиль написання, то вкажіть розширення для файлу .scss.

Відео: Стиль написання коду

Приклад коду:

#main p { 
 color:# 00ff00- 
 width:97% - 
} 
 
#main p .redbox { 
 background-color:# ff0000- 
 color:# 000- 
}

SASS

SASS (Syntactically Awesome StyleSheets) - це найстаріший і відомий формат, відомий як формат відступів. Вся справа в тому, що тут замість фігурних дужок розробникам пропонується використовувати відступи. Це дозволяє писати зрозумілий і короткий код. Якщо ви бажаєте використовувати цей стиль написання коду, то вам для ваших файлів потрібно вказувати розширення .sass.

Відео: Правила гарного стилю програмування в PHP

Приклад коду:

#main p 
 color:# 00ff00- 
 width:97% - 
 
.redbox 
 background-color:# ff0000- 
 color:# 000-

Який варіант використовувати?

Звичайно, це справа звички. Використовуйте те, що вам ближче, проте є одна маленька деталь: вся справа в тому, що функції sass і scss форматів можуть відрізнятися, тому, якщо ви десь копіюєте код, то не забувайте перевіряти, чи підтримується ця функція в обраному вами стилі і, якщо ні, то який у неї є аналог.

Відео: Урок 2. Завдання CSS стилів. Препроцесори. Швидкий старт

висновок

Отже, сьогодні ми розглянули різні способи написання sass коду. Але варто пам`ятати, що препроцесор - це всього лише помічник при написанні коду стилів, тому, якщо ви ще не дуже добре знаєте CSS3, то раджу звернути увагу на відеокурс HTML5 та CSS3 з Нулі до Гуру.

А у мене на цьому все. Дякую за увагу!

Поділися в соціальних мережах:

Схожі