Синтацтицалли Авесоме Стилесхеетс Усинг Цомпасс ин Сасс
У нашем последњем посту, једном смо споменули компас. Према званичном сајту, описано је као ЦСС Аутхоринг Фрамеворк отвореног кода.
Укратко, компас је Сасс екстензија и, као ЛЕСС Елемент оф ЛЕСС, има гомилу спремних за употребу ЦСС3 Микинс, осим што је додао и неколико других ствари које га чине моћнијим компанијским алатом за Сасс. Хајде да проверимо.
Инсталлинг Цомпасс
Компас, као Сасс, треба да буде инсталиран у нашем систему. Али, ако користите апликацију као што је Сцоут Апп или Цомпасс.апп, то неће бити потребно.
Без њих, морате то да урадите “ручно” кроз Терминал / Цомманд Промпт. Да бисте то урадили, откуцајте следећу командну линију;
На Мац / Линук терминалу
судо гем инсталл компас
На Виндовс командној линији
гем инсталл компас
Ако инсталација успе, требало би да добијете обавештење као што је приказано испод;
Затим покрените следећу командну линију у свом радном директоријуму да бисте је додали Компас пројектне датотеке.
цомпасс инит
Додатна литература: Документација командне линије компаса
Конфигурација компаса
Ако сте покренули ову наредбу цомпасс инит, сада би требало да имате датотеку под називом цонфиг.рб у радном именику. Ова датотека се користи за конфигурисање излазног пројекта. На пример, можемо да променимо наша преференцијална имена.
хттп_патх = "/" цсс_дир = "цсс" сасс_дир = "сцсс" имагес_дир = "имг" јавасцриптс_дир = "јс"
Уклоните линију коментара која је генерисана компасом; поставили смо истина ако су нам потребни коментари за штампање или фалсе ако не мора.
лине_цомментс = фалсе
Такође можемо одлучити о ЦСС излазу. Постоје четири опције које можемо изабрати :проширен, : цомпацт, : цомпресседи :угнездио. За сада нам је само потребно да се прошири док смо још у фази развоја.
оутпут_стиле =: екпандед
Мислим да ће ове конфигурације бити довољне за већину пројеката уопште, али увијек можете погледати ову документацију, Цомпасс Цонфигуратион Референце ако требате више поставки.
На крају, морамо гледати сваки фајл у именику са овом командном линијом;
сат компаса
Ова командна линија, као у Сассу, гледаће сваку промену датотеке и креира или ажурира одговарајуће ЦСС датотеке. Али запамтите, покрените ову линију након што сте конфигурисали пројекат цонфиг.рб, иначе ће само игнорисати промене у датотеци.
ЦСС3 Микинс
Пре ходања кроз ЦСС3, у нашој примарној .сцсс фајл, морамо да увеземо компас са следећом линијом @импорт "компас";, ово ће увести сва проширења у компасу. Али, ако нам је потребан само ЦСС3 можемо то урадити и прецизније са овом линијом @импорт "компас / цсс3".
Додатна литература: Цомпасс ЦСС3.
Почнимо са стварањем Саас-а и Цомпасс-а. У ХТМЛ документу, под претпоставком да сте га и креирали, ставићемо следећу једноставну ознаку:
Идеја је такође једноставна; направићемо ротирану кутију са заобљеним угловима, а испод је наш Сасс нестед стил за стартер;
тело бацкгроунд-цолор: # ф3ф3ф3; сецтион видтх: 500пк; маргин: 50пк ауто 0; див ширина: 250пк; хеигхт: 250пк; бацкгроунд-цолор: #ццц; маргин: 0 ауто;
И, да би добили наш правоугаоник заобљене углове, можемо укључити Цомпасс ЦСС3 Микинс на следећи начин;
тело бацкгроунд-цолор: # ф3ф3ф3; сецтион видтх: 500пк; маргин: 50пк ауто 0; див ширина: 250пк; хеигхт: 250пк; бацкгроунд-цолор: #ццц; маргин: 0 ауто; @инцлуде бордер-радиус;
Ово бордер-радиус Микинс ће генерисати све префиксе претраживача и, по дефаулту, радијус угла ће бити 5пк. Али, ми такође можемо одредити радијус нашој потреби на овај начин @инцлуде бордер-радиус (10пк); .
див див видтх: 250пк; хеигхт: 250пк; бацкгроунд-цолор: #ццц; маргин: 0 ауто; -вебкит-бордер-радиус: 10пк; -моз-бордер-радиус: 10пк; -мс-бордер-радиус: 10пк; -о-бордер-радиус: 10пк; радијус: 10пк;
Затим, као план ћемо и ротирати кутију. То је стварно лако урадити са компасом, све што треба да урадимо је да једноставно позовемо метод трансформације, као што је то случај;
тело бацкгроунд-цолор: # ф3ф3ф3; сецтион видтх: 500пк; маргин: 50пк ауто 0; див ширина: 250пк; хеигхт: 250пк; бацкгроунд-цолор: #ццц; маргин: 0 ауто; @инцлуде бордер-радиус (10пк); @инцлуде ротате;
Овај Микинс ће такође генерисати те досадне префиксе добављача и ротација ће подразумевати 45 степени. Погледајте генерисани ЦСС испод.
див див видтх: 250пк; хеигхт: 250пк; бацкгроунд-цолор: #ццц; маргин: 0 ауто; -вебкит-бордер-радиус: 10пк; -моз-бордер-радиус: 10пк; -мс-бордер-радиус: 10пк; -о-бордер-радиус: 10пк; радијус: 10пк; -вебкит-трансформ: ротате (45дег); -моз-трансформ: ротате (45дег); -мс-трансформ: ротате (45дег); -о-трансформ: ротирати (45дег); трансформ: ротате (45дег);
Цомпасс Хелперс
Једна од најмоћнијих функција у компасу су помагачи. Према званичном сајту, Помоћници компаса су функције које повећавају функције које пружа Сасс. У реду, погледајмо следеће примере да бисмо добили јасну слику.
Додавање @ фонт-фаце датотека
У овом примеру, додаћемо прилагођену породицу фонтова са @ фонт-фаце правило. У обичном ЦСС3, код може изгледати овако испод, који се састоји од четири различите врсте фонтова и за неке људе је тешко запамтити.
@ фонт-фаце фонт-фамили: "МиФонт"; срц: урл ('/ фонтс / фонт.ттф') формат ('труетипе'), урл ('/ фонтс / фонт.отф') формат ('опентипе'), урл ('/ фонтс / фонт.вофф') формат ('вофф'), урл ('/ фонтс / фонт.еот') формат ('ембеддед-опентипе'); Са компасом исто можемо лакше урадити фонт-филес () Хелперс;
@инцлуде фонт-фаце ("МиФонт", фонт-филес ("фонт.ттф", "фонт.отф", "фонт.вофф", "фонт.еот")); Горњи код ће генерисати резултат који је потпуно исти као и први исјечак кода, а такође ће аутоматски детектовати врсту фонта и додати га у формат () синтакса.
Међутим, ако погледамо код пажљиво, видећете да нисмо додали путању фонта (/ фонтс /). Како је Цомпасс знао гдје се налазе фонтови? Па, немојте се збунити, овај пут је заправо изведен из цонфиг.рб са фонтс_патх својство;
фонтс_дир = "фонтови"
Рецимо да га промијенимо фонтс_дир = "мифонтс", онда ће генерисани код бити урл ('/ мифонтс / фонт.ттф'). По дефаулту, када не специфицирамо путању, компас ће га усмерити стилесхеетс / фонтс.
Аддинг Имаге
Направимо још један примјер, овај пут ћемо додати слику. Додавање слика преко ЦСС-а је уобичајена ствар. Обично то радимо користећи позадинска слика као што је то;
див бацкгроунд-имаге: урл ('/ имг / тхе-имаге.пнг'); У компасу, а не употребом урл () функција, можемо је заменити урл-слике () Помоћници и слично додавању @ фонт-фаце изнад, можемо потпуно игнорисати путању и допустити компасу да управља са остатком.
Овај код ће такође генерисати потпуно исту ЦСС декларацију као у првом исечку.
див бацкгроунд-имаге: имаге-урл (тхе-имаге.пнг);
Поред тога, компас има и помоћнике за димензије слике, првенствено детектује ширину и висину слике, тако да у случају да нам је потребно да оба буду наведена у нашем ЦСС-у, можемо додати још две линије, као што следи;
див бацкгроунд-имаге: имаге-урл ("имагес.пнг"); видтх: имаге-видтх ("имагес.пнг"); хеигхт: имаге-хеигхт ("имагес.пнг"); Резултат ће постати нешто слично;
див бацкгроунд-имаге: урл ('/ имг / имагес.пнг? 1344774650'); видтх: 80пк; хеигхт: 80пк; Додатна литература: Цомпасс Хелпер Фунцтионс
Финал Тхоугхт
Добро, данас смо доста разговарали о компасу и као што можете видети, то је заиста моћна алатка и дозволите нам да напишемо ЦСС на елегантнији начин.
И, као што сте већ знали, Сасс није једини ЦСС Препроцессор; ту је и ЛЕСС који смо претходно детаљно дискутовали. У следећем посту, покушаћемо да упоредимо, од главе до главе, који један од ова два боље ради у предпроцесирању ЦСС-а.
- Довнлоад Соурце
