Какво трябва да знаете вече
Преди да продължите, трябва да разберете основно следното:
Ако искате първо да изучите тези предмети, намерете уроците на нашата начална страница .
Какво е Sass?
- Sass означава Syntactically Awesome Style Sheet
- Sass е разширение на CSS
- Sass е CSS препроцесор
- Sass е напълно съвместим с всички версии на CSS
- Sass намалява повторението на CSS кода и следователно спестява време
- Sass е проектиран от Hampton Catlin и разработен от Natalie Weizenbaum през 2006 г.
- Sass е безплатен за изтегляне и използване
Защо да използвам Sass?
Таблиците със стилове стават все по-големи, по-сложни и по-трудни за поддържане. Тук CSS предварителният процесор може да помогне.
Sass ви позволява да използвате функции, които не съществуват в CSS, като променливи, вложени правила, миксини, импортиране, наследяване, вградени функции и други неща.
Прост пример защо Sass е полезен
Да предположим, че имаме уебсайт с три основни цвята:
# a2b9bc
# b2ad7f
# 878f99
И така, колко пъти трябва да въведете тези HEX стойности? Много пъти. А какво ще кажете за вариации на едни и същи цветове?
Вместо да пишете горните стойности много пъти, можете да използвате Sass и да напишете това:
Така че, когато използвате Sass и основният цвят се променя, трябва да го промените само на едно място.
Как действа Sass?
Браузърът не разбира кода на Sass. Следователно ще ви е необходим предварително обработващ процесор на Sass, за да конвертирате кода на Sass в стандартен CSS.
Този процес се нарича транпилиране. Така че, трябва да дадете на транспилатор (някаква програма) някакъв код на Sass и след това да получите обратно CSS код.
Съвет: Транспилирането е термин за вземане на изходен код, написан на един език, и трансформиране / превод на друг език.
Тип файл на Sass
Файловете Sass имат разширението на файла .scss.
Sass Коментари
Sass поддържа стандартни CSS коментари /* comment */и освен това поддържа вградени коментари // comment: