Какво е Sass? Вашето ръководство за този най-добър CSS препроцесор
Какво е Sass? Това е въпросът, на който ние тук трябва да отговорим. Ако сте нов в уеб дизайна, вероятно сте чували термина да се носи, но може да не сте в крак с това какво точно е Sass, какво прави и дали трябва да го използвате или не. Накратко, Sass е CSS препроцесор, който добавя специални функции като променливи, вложени правила и комбинации (понякога наричани синтактична захар) в редовен CSS. Целта е да се направи процесът на кодиране по-опростен и по-ефективен. Нека разгледаме по-подробно.
За повече инструменти разгледайте нашето ръководство за най-добрите CSS рамки и върха инструменти за уеб дизайн да пробвам.
Какво е CSS препроцесор?
CSS препроцесорът е скриптов език, който разширява CSS, като позволява на разработчиците да пишат код на един език и след това да го компилират в CSS. Sass е може би най-популярният препроцесор в момента, но други известни примери включват По-малко и Стилус .
Преди да продължим по-нататък, е необходимо бързо обявяване на обществена услуга: повечето уеб дизайнери биха казали, че ако сте нов в CSS, по-добре избягвайте Sass (или каквито и да било препроцесори, разширения или рамки), докато все още сте изучаване на. Въпреки че е вярно, те предлагат много предимства в скоростта и ефективността, важно е наистина да се справите с основите на CSS. Уверете се, че сте научили основните понятия, преди да започнете да изследвате преки пътища и да обърквате нещата.
Какво е Sass?
Sass (което означава „Синтактично страхотни таблици със стилове) е разширение на CSS, което ви позволява да използвате неща като променливи, вложени правила, вграден внос и др. Той също така помага да се поддържат нещата организирани и ви позволява да създавате стилове по-бързо.
Sass е съвместим с всички версии на CSS. Единственото изискване за използването му е, че трябва да имате инсталиран Ruby. Потребителите също са помолени да следват Насоки на общността на Сас .
Как да използвам Sass
В следващия раздел ще очертаем някои основни съвети за използването на Sass, като използваме примери от официалния уебсайт на Sass. Погледнете Документация на Sass за допълнителни препратки и примери.
Синтаксис
Sass включва две опции за синтаксис:
- SCSS (Sassy CSS): Използва .scss разширение на файла и е напълно съвместим със синтаксиса на CSS
- С отстъп (просто наречен „Sass“): Използва .ssass разширение на файла и отстъп, а не скоби; не е напълно съвместим със синтаксиса на CSS, но е по-бързо да се напише
Имайте предвид, че файловете могат да бъдат преобразувани от единия синтаксис в другия с помощта на sass-convert команда.
Променливи
Подобно на други езици за програмиране, Sass позволява използването на променливи, които могат да съхраняват информация, която можете да използвате в целия си стил. Например можете да съхранявате цветна стойност в променлива в горната част на файла и след това да използвате тази променлива, когато задавате цвета на вашите елементи. Това ви позволява бързо да променяте цветовете си, без да се налага да променяте всеки ред поотделно.
Например:
$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }Ще бъде създаден следният CSS:
body { font: 100% Helvetica, sans-serif; color: #333; }Гнездене
Гнезденето е нож с две остриета. Въпреки че предоставя отличен метод за намаляване на количеството код, който трябва да напишете, той може също да доведе до свръхквалифициран CSS, ако не се изпълни внимателно. Идеята е да вложете вашите CSS селектори по такъв начин, че да имитират вашата HTML йерархия.
Следното показва основен навигационен стил, който използва влагане:
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }Изходът на CSS е както следва:
nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }Частици
Частиците са по-малки Sass файлове, които могат да бъдат импортирани (вижте следващия раздел) в други Sass файлове. Помислете за частиците като кодови фрагменти. С тези кодови фрагменти вашият CSS вече може да бъде модулен и по-лесен за поддръжка. Частичното се обозначава като такова, като го назовава с водеща долна черта: _partial.scss .
Внос
Използва се с Partials (виж предишния раздел), @import директива ви позволява да импортирате частичните си файлове в текущия файл, за да изградите един единствен CSS файл. Имайте предвид колко импорти, които използвате като HTTP заявка, ще бъдат генерирани за всеки един.
// _reset.scss html, body, ul, ol { margin: 0; padding: 0; }// basefile.scss @import 'reset'; body { font: 100% Helvetica, sans-serif; background-color: #efefef; }И съответният CSS изход:
html, body, ul, ol { margin: 0; padding: 0; } body { font: 100% Helvetica, sans-serif; background-color: #efefef; }Забележка: Когато импортирате частични данни, не е необходимо да включвате разширението на файла или долната черта.
Миксини
Едно от предимствата на използването на препроцесори е способността им да приемат сложен дългосрочен код и да го опростяват. Тук миксините са полезни!
Например, ако трябва да включите префиксите на доставчика, вместо това можете да използвате миксин. Разгледайте този пример за граница-радиус :
@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); }Забележете @mixin директива в горната част. Дадено му е името граница-радиус и използва променливата $ радиус като негов параметър. Тази променлива се използва за задаване на стойността на радиуса за всеки елемент.
По-късно, @include директива, заедно с името на миксина ( граница-радиус ) и параметър ( 10px ). По този начин .box {@include border-radius (10px); } .
Създава се следният CSS:
.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }Удължаване / наследяване
The @разшири директива е наречена една от най-мощните функции на Sass. След като го видите в действие, става ясно защо.
Идеята е, че с тази директива няма да се налага да включвате множество имена на класове в вашите HTML елементи и можете да запазите кода си СУХ (не се повтаряйте). Вашите селектори могат да наследят стиловете на други селектори и след това да бъдат лесно разширени, когато е необходимо. Сега това е мощно.
Оператори
Наличието на възможност за извършване на изчисления във вашия CSS ви позволява да направите повече, като конвертирате стойности на пикселите в проценти. Ще имате достъп до стандартни математически функции като събиране, изваждане, умножение и деление. Разбира се, тези функции могат да се комбинират, за да се създадат сложни изчисления.
Освен това Sass включва няколко вградени функции за да помогне за манипулиране на числа. Функции като процент() , етаж () и кръгъл() да назовем само няколко.
Прочетете още:
- 6 огромни тенденции в уеб дизайна за 2020 г.
- HTML тагове: Ръководство за основите
- Как да усъвършенствате дизайнерските си умения (ако сте разработчик)
