Стълбче е предварително обработващ код 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 файлове в техния формат и начинът, по който можем да използваме техния синтаксис, е много разнообразен. И това е само предварителен преглед. Затова ви насърчавам, ако се интересувате, да научите малко повече за Стълбче