5 причини защо Stylus е най-добрият 🙌 CSS препроцесор през 2020 г.

CSS препроцесорите могат да ви спестят безброй часове, ако го използвате правилно (🤭) и поради тази причина изборът на „правилния“ препроцесор е от решаващо значение. 🕵️‍♂️

Позволете ми да ви запозная със Stylus, най-гъвкавият, ефективен, динамичен и изразителен начин за писане на CSS. Ето 5 причини, поради които Stylus трябва да бъде вашият предпочитан избор за всичко - от демо на CodePen с 10 реда до гигантски проект с 10 хиляди реда

#1 Стилусът е гъвкав 🤘🏼

Не харесвате точка и запетая, скоби, двоеточие? пропуснете ги.
Като тях? използвайте ги.

Липсват скоби? Искате да копирате и поставите малко CSS от StackOverflow и да не се притеснявате за отстъпите? (🤫) Stylus поддържа и CSS синтаксис!

Предпочитам най-чистия от всички, без скоби, без двоеточие и без точка и запетая. Останалата част от статията следва този синтаксис - така че внимавайте.

#2 Стилусът е по-чист 🌈

Няма нужда да поставяте префикс на променливите с $. Но вие ги харесвате? добре, можете да ги използвате!
$ не е нищо особено за Stylus. Вие добавяте префикс към всеки символ, който искате, защото Stylus не изисква префикс и всеки символ с префикс просто става част от името на променливата (страхотно ❄️)

Няма нужда да използвате @mixin или @function. Stylus е достатъчно умен, за да разбере 🧐 какво е функция и какво е миксин (функциите се обсъждат по-късно)

Както можете да видите, можете също да предоставите стойности по подразбиране на аргументи, които също могат да бъдат други аргументи.

Ето как използвате този миксин

Но тук идва страхотната част, вие също наричате миксина по този начин!

Това се нарича Прозрачен миксин 🤩, „прозрачен“, защото… добре, не изглежда като извикване на миксин, а по-скоро прилича на CSS свойство

Да не говорим, че можете също да извикате mixin по някой от следните начини!

Сега, след като знаете, че включването или пропускането на запетаи, двоеточие и подобни неща също е валидно, няма да споменавам това отново от тук нататък 😅

Какво ще стане, ако наименуваме нашия mixin по същия начин като съществуващото css свойство? това също работи!

Обърнете внимание, че граница вътре в миксина за граници се отнася до действителното свойство на border CSS. Но как Stylus знае дали нещо е mixin или property?

Отговорът е прост, ако сте вътре в mixin с име x, нищо с име x не може да бъде само mixin, защото това би означавало безкраен цикъл 🌌

Да поговорим за функции!

функциите се декларират по същия начин като миксините
Единствената разлика е, че функциите връщат някаква стойност(и)
Нека да видим как можем да дефинираме функция в Stylus

Но къде е ключовата дума за връщане? Можете също да пропуснете ключова дума за връщане!

Но ако искате да го използвате, продължете и го използвайте.

Една функция може да върне и повече от едно нещо! 🐙

Което дава следния CSS:

Функциите, разбира се, са по-мощни от връщането на стойности, можете да добавите всякакъв вид логика във вашите функции

#3 Stylus има функция за търсене на свойства 👀

Ако искате да зададете свойството X спрямо стойността на свойството Y, това е нещото, от което се нуждаете!

Както винаги, ето и демото 🙊:

#4 Стилусът има много референтни типове 🍭

Частични препратки 🍩

Чух, че харесвате Nesting? Какво, ако сте на 4-то ниво на влагане, искате да се насочите към родител на 2-ро ниво?

Е, Stylus ви покрива!

^[N] насочва селектора на N-то ниво
Счита се, че коренът (тук .a) е на 0-то ниво
Отрицателните стойности насочват селектори от текущия родител
текущият родител (.c) може да бъде насочен чрез традиционния селектор &
Баба и дядо може да бъде избран, като преминете 1 ниво над родител с помощта на ^[-1]

Относителна справка 🎂

Не харесвате броенето? Вие по-скоро човек с две точки ли сте?

Е, вие също можете да го използвате, просто се уверете, че използвате наклонена черта напред 🚀

Коренна справка 🍬

Най-краткият начин за избор на root? една наклонена черта!

и много други…

#5 Стилусът е изразителен 🍁

Всичко в Stylus е изразително и за да го направи така, Stylus използва множество оператори, ключови думи и сладък синтаксис, за да ви накара да се почувствате като у дома си.

Някои от операторите са толкова полезни, че ще се чудите защо ги няма в други препроцесори.

Stylus има толкова много усъвършенствани функции, че ще ми отнеме много време, за да обясня всички и всички 😅, но ето малко вкус на всички неща, които правят Stylus завършен електроинструмент!