Стълбче е предварително обработващ код CSS, което ни позволява да работим по-просто в нашия текстов редактор и след това обяснявам причините за моето твърдение.
Това е лист със стилове, както го познаваме:
body {шрифт: 12px Helvetica, Arial, sans-serif; } a.button {-webkit-border-radius: 5px; -moz-граница-радиус: 5px; граница-радиус: 5px; }
И това би било същата таблица със стилове, създадена с Стилус:
шрифт на тялото 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
Къде са ключовете? Къде отиде точката с запетая, дебелото черво? Забравен, Стълбче прави това за нас.
Ако започвате с CSS y HTML не се препоръчва да се използва Стълбче за простия факт, че можете да забравите как нещата наистина работят, но ако вече имате време на този свят и искате да си спестите кода и да работите .. продължете напред.
Програмисти Питон ще намерите в Стълбче нещо много подобно на това, към което са пригодени, тъй като трябва само да правите отстъп, за да се направи магията.
Инсталация
Така че Стълбче работа, която трябва да инсталираме Node.js който е в клона на Общността, затова продължаваме да го правим:
$ sudo pacman -S nodejs
И по-късно инсталираме Stylus. Традиционният начин би бил:
$ npm install -g stylus
Инсталира се добре, но не работи при мен, така че е много по-лесно да се инсталира от AUR:
$ yaourt -S nodejs-stylus
Как да използвате Stylus
Добре, вече сме инсталирали Node.js и ние сме инсталирали Стълбче.. Как да го използваме? Това е просто. Да приемем, че имаме директория със следните файлове:
- реж. - index.html - style.css
Това, което трябва да направим, е да създадем файла стил.стил, по който ще работим. В този файл можем да имаме нещо като:
body background-color #ffff font-size 12px a.button color red padding 10px
Ако запазим или направим някакви промени, нищо не се случва, защото ние не "компилираме" нашия файл. За да го компилираме, това, което правим, е да отворим терминал в нашата директория (където е файлът стил.стил) и изпълнете:
stylus -c style.styl
Но всеки път, когато запазваме файла стил.стил ще трябва да изпълним кода, но за щастие не е необходимо, тъй като ако изпълним същата команда, но добавяйки параметъра -w (гледайте) се случва следното:
стилус -c -w style.styl гледане /usr/lib/node_modules/stylus/lib/functions/index.styl компилиран style.css гледане style.styl компилиран style.css компилиран style.css
С други думи, файлът се компилира автоматично .. Ще бъде ли резултатът?
body {background-color: #fff; font-size: 12px} a.button {color: # f00; padding: 10px}
Както можете да видите, нашият код не само ни създава CSS, но елиминира ненужните интервали, така че нашата таблица със стилове да тежи по-малко 😀
Не само това, Стълбче Позволява ни да предаваме CSS файлове в техния формат и начинът, по който можем да използваме техния синтаксис, е много разнообразен. И това е само предварителен преглед. Затова ви насърчавам, ако се интересувате, да научите малко повече за Стълбче
Той е с:
$ sudo npm install -g стилус
Но защо? Ако искам само да го използвам в моята сесия .. но хей, ако проблемът е в това ... 🙂
Първоначално е добре, но Stylus се използва с различни приставки, докато вървите, например Nib или Stylus auto prefixer.
Мисля, че когато го инсталирате с Yaourt, той не се записва в / usr / local / lib / node_modules и ако се опитате да импортирате и използвате някоя от библиотеките, ще прецакате xD
Случва се, че както ви казах във форума, Stylus се основава на прозрачно използване на библиотеки от терминала, това е същността на този препроцесор, той прави неща като:
стилус -u jeet -u руптура -u типографски -u перо -w стил.стил
За да кажете нещо (можете да имате псевдоним или функция или да използвате глътка или грухтене или каквото и да е: 3). Интересното при това е, че той не релефен css от кутията при компилиране, но го запълва „динамично“, тъй като в рамките на вашия код извиквате функциите и комбинациите на съответните библиотеки.
Всъщност ще постави плосък код, който е деклариран (нулира, изчиства корекции и т.н.), но няма да ви накара да пушите, например функциите span () на jeet, ако не ги извикате и това е чиста любов x3
Това е цял свят и затова ви казвам, като го инсталирате по този начин, не знам в какви файлове попада и не мисля, че можете да използвате разширенията толкова просто, защото когато използвате командния ред, - use flag ще погледне вътре в инсталацията на стилуса, с node това е node_modules и остава там, където казах по-горе, с Yaourt, NPI xD
интересно!
Предлагам ви да направите актуализиран урок за това как да използвате SIP номер за обаждане на мобилни телефони от компютъра ... безплатно