Stylus - запознаване с препроцесора - Zencoder
27 декември 2014 г
Време е да се запознаете с препроцесора Stylus. По-долу има превод на статия от Дейвид Уолш за малко известния, но изключително полезен препроцесор Stylus. Оригиналната статия е публикувана тук - Първи стъпки със Stylus
В средата за уеб разработка често и постоянно се чува само за два препроцесора: Sass и LESS. Има обаче още един препроцесор, за който не се чува много често - това е Stylus. Когато препроектирах мрежата за разработчици на Mozilla, избрах Stylus по няколко причини:
Инсталиране на стилус
Препроцесорът Stylus е проект с отворен код, хостван в GitHub, така че може лесно да се инсталира или от изходни файлове, или с помощта на мениджър на пакети:
CSS файловете, създадени с помощта на синтаксиса Stylus, трябва да имат разширение и могат да бъдат разположени навсякъде в проекта. Препроцесорът Stylus няма никакъв конфигурационен файл, за да започнете компилацията е достатъчно да стартирате помощната програма за командния ред с минимален набор от ключове:
Горната команда компилира изходния стилус файл в директория със същото име. С други думи, файлът се компилира във файл и се поставя в .
Помощната програма може да се стартира не само за еднократна компилация, но и за проследяване на промените във файла чрез компилиране в движение; Има ключ за това:
Както може би се досещате, програмата има много повече опции, чийто пълен списък можете да намерите тук - Изпълним файл. По-специално, с помощта на необходимите клавиши можете да извършите обратно преобразуване от CSS в Stylus, да сравните вход / изход и много други.
Но нека пристъпим към разглеждането на най-важното, заради което е започнат този превод.- Синтаксис и характеристики на препроцесора Stylus
Основи на синтаксиса на стилуса
Синтаксисът на Stylus е много подобен на синтаксиса на други препроцесори (Sass или LESS). Но нека да разгледаме по-отблизо какво всъщност представлява:
По принцип няма нищо ново в горното - всички тези точки съществуват и в други препроцесори. Ако внезапно в синтаксиса липсват скоби, двоеточия или запетаи, тогава можете спокойно да ги добавите към кода - препроцесорът Stylus ще ви разбере перфектно и в този случай.
Създаване и използване на миксини
Миксините са изключително полезни по няколко причини. Благодарение на тях, когато пишете стилове в CSS, можете да използвате логика, както и да структурирате кода.
Създаването на миксини в Stylus е проста задача и синтаксисът на миксините е точно това, което бихте очаквали:
Когато създавате миксини под Stylus, можете да зададете стойности по подразбиране за аргументи:
Миксинът може да върне изчислена стойност с помощта на ключова дума или може да върне стилове, дефинирани в самия миксин. Тези стилове могат да бъдат приложени към елемента, който извиква този миксин:
И разбира се, условията могат да се използват вътре в mixins (обаче, както на всяко друго място в кода на Stylus):
Горният миксин генерира решетка въз основа на минимална стойност (минимална ширина на колона), максимална стойност (максимална ширина на колона) и броя на колоните (който се увеличава). Последният аргумент, return-dimension , се използва за указване дали mixin просто ще върне дадената стойност, без да създава никакви CSS класове.
Полезни стилус миксини
Докато работех по проекта MDN, имах нужда от много полезни миксини под Stylus, като напрПоддръжка на RTL, поддръжка на локализация, както и поддръжка на голям брой браузъри. По-долу ще представя някои от тези миксини - може би някои от читателите ще ги намерят полезни на практика.
Нулирайте последното дете
Този миксин е създаден, за да нулира празното пространство в последния елемент на родителския блок. По правило такива пространства в CSS са и .
Този миксин задава или за родителския блок. И тогава празното пространство просто се премахва от последния елемент на този блок.
Стил на контейнера
Оформянето на контейнер е трудно поради необходимостта от префикси на доставчици, така че използването на mixin го прави много по-лесно:
Заключение
Това завършва превода.
Мога да добавя от себе си.
Под Sublime Text 3 има плъгин Stylus за подчертаване на синтаксис и автоматични раздели. Ако планирате да работите по-нататък в Stylus, тогава този плъгин трябва да бъде инсталиран - без него просто е трудно и дълго да се кодира.
Плъгинът Emmet има поддръжка за синтаксиса Stylus (Emmet никога не престава да ме радва). Всички клавишни комбинации на Emmet остават непроменени под Stylus, сякаш кодирам в добрия стар CSS.
## Git Stash> Влюбих се в командата stash от git, въпреки че не се свързвам със самия git без . Командата _git stash_ е за. … Продължавай да четеш