Какво е SASS?
SASS е език на стилни листове, който е проектиран от Hampton Catlin. Това е съкращение за Syntactically Awesome Style Sheets. Това е сценарий на предпроцесорен език, който може да бъде интерпретиран или компилиран в каскадни таблици със стилове. Това е по-стабилна и мощна версия на CSS, която описва структурно стила на всеки документ. SASS е просто разширение към CSS. Тя включва нови функции като променливи, вложени правила, миксини, вграден внос, вградени функции, които помагат при манипулиране на цветни и други стойности. Всичко това е напълно съвместимо с CSS.
дефиниция
Това е CSS предпроцесор, който помага за намаляване на повторенията с CSS и от своя страна спестява време. Счита се за по-стабилен и мощен в сравнение с CSS. Той описва стила на документа много ясно и структурно. Той помага да се свърши работата по по-бърз и по-добър начин. С всичките си характеристики той е предимно предпочитан пред CSS. Тя позволява да се определят променливи, които могат да започнат със знак $. Присвояването на променливата може да се извърши с помощта на двоеточие. Той също така поддържа логическо влагане, което CSS не. SASS дава възможност на потребителя да има вложен код, който може да бъде вмъкнат един в друг.
Разбиране на SASS
SASS се счита за мощен, стабилен и бърз. Причината за това е, че има диференциращи функции като променливи, гнездене, миксини и др. Нека да преминем през тези по един и да разберем по-добре SASS.
1. Променливи:
Променливите позволяват на потребителя да дефинира определени стойности и да ги използва отново в целия код. Тези променливи са подобни на JavaScript. Всяка променлива може лесно да бъде дефинирана чрез добавяне на знак $.
Пример : $ променлива-име: стойност на променлива;
Потребителят може да дефинира произволен брой променливи според нуждите. След като променливите са компилирани, те се заменят с техните действителни стойности в CSS.
2. Гнездене:
Влагането помага при дефинирането на детски селектори в селектори за родители. CSS не поддържа това и по този начин прави SASS по-оптимизиран език за кодиране. Той помага при писането на по-чист и по-малко повтарящ се код.
3. Миксини:
Mixin е друга полезна функция, която може да намали излишността и прави възможно повторното използване на кода. Той е подобен на функциите, при които веднъж дефиниран код може да бъде използван повторно произволен брой пъти.
4. Партии и внос:
Партиалите са отделни файлове, които могат да съдържат код, който прави кода модулен. С помощта на тази функция можете лесно да имате отделни файлове за различни компоненти. Името на частиците винаги се определя чрез добавяне на подчертаване преди името.
Как работи SASS?
За да получите кода, трябва да използвате SASS предпроцесор. Той помага при превеждането на SASS кода в CSS. Този процес е известен като преминаващ. Подобно е на компилирането, но тук вместо преобразуване на човешки релаксиращ код в машинен код, преводът се извършва от един читав на човек език в друг. Преминаването от SASS към CSS е лесно. Всички променливи, които са дефинирани в SASS, се заменят със стойности в CSS. Това улеснява създаването и поддържането на различни CSS файлове за вашето приложение.
Как да използвате SASS?
По-долу стъпките ще ви насочат към използването на SASS по най-лесния възможен начин.
- Създайте демо папка навсякъде във вашата система.
- Вътре в тази папка създайте две папки / CSS и / scss.
- След като се създадат тези две папки, отидете на / scss папка и създайте файл, наречен demo.scss Това разширение е scss, което означава, че е SASS файл.
- Отидете на командния ред и отворете демонстрационната папка.
- След като сте в тази папка, ще гледате как вашите scss файлове се компилират в CSS. Въведете командата по-долу, за да гледате:
Sass - гледайте scss: CSS
Часовникът е флаг, който открива промяната и компилира scss файла в окончателния CSS файл, който може да се използва във вашето приложение.
Предимства на SASS
- SASS дава възможност на потребителя да напише чист код. Улеснява работата с нея и по-малко CSS се използва за създаване на програма.
- Той съдържа по-малко код, което улеснява по-бързото му създаване на съответния CSS.
- Той е по-стабилен, мощен и елегантен. Използва се от дизайнери и разработчици и им помага да работят по-ефективно и бързо.
- Той е съвместим с CSS и следователно всички CSS библиотеки могат да бъдат използвани.
- Той предоставя съоръжения като вмъкване, което помага при писането на вложен синтаксис и да се използват функции като манипулация с цвят, математически функции и други стойности.
Защо трябва да използваме SASS?
По-долу са петте основни точки, защо трябва да използвате SASS:
- Променливи: За разлика от CSS, където винаги трябва да се връщате назад и да проверявате за предишните си стилове, SASS има променливи, които съхраняват информация и могат да бъдат използвани повторно. Всички стойности на цветовете, стека на шрифта и т.н. могат да се съхраняват и използват, когато е необходимо.
- @import: CSS има @import, който дърпа всички останали стилове, но не създава друга HTTP заявка. SASS е предпроцесор, който ще изтегли всички файлове, преди да компилира CSS. В резултат на това CSS страницата се обработва от една HTTP заявка. Заявката може да бъде разбита на парчета и все още ще служи само една страница за браузъра.
- Цветни функции: SASS има различни функции, подобни на CSS. Всичко това може лесно да се използва в SASS.
- @extend: @extend ни позволява да споделяме набор от CSS свойства от един селектор на друг.
- Mixins: Mixins са декларации, които могат да се използват в целия сайт.
Защо имаме нужда от SASS?
SASS е по-бърз и ефективен. SASS кодът може да се използва повторно и по този начин спестява време. Преобразуването на код от SASS в CSS не е забързано и затова е препоръчително да се използва, за да може да се спести време.
Подходяща аудитория за обучение на SASS технологии
Който и да е програмист, който използва CSS и търси по-ефективна и по-малко отнемаща време технология за изграждане на уеб приложения, може да използва SASS и да изпробва новите функции.
Как ви помага тази технология да се развивате в кариерата си?
Това е усъвършенствана версия на CSS. След като знаете SASS, можете лесно да получите свободна практика и работа с големи компании. Той ви помага да работите по-бързо и да покажете уменията си с функциите, които предоставя.
заключение
SASS е много ефективен начин за подмяна на CSS. С променливите, функциите за гнездене, миксин и други функции помага за осигуряване на по-добри резултати от CSS Когато замените CSS със SASS, можете лесно да използвате отново кода си, вместо да пишете едно и също парче отново и отново. Затова използвайте SASS и станете здрави с вашите приложения.
Препоръчителен член
Това е ръководство за това какво е SASS? Тук обсъдихме концепциите, дефиницията, работата, предимствата и кариерния растеж на SASS. Можете да разгледате и другите ни предложени статии, за да научите повече -
- Какво е Bootstrap и как да го използвате?
- Какво е VMware? Каква е неговата употреба?
- Какво прави сървърът на приложения?
- Какво е наследяване на Java?
- Основни предимства и недостатъци на SAS