Једноставан и једноставан водич за разумевање Сасс-а
Пре неког времена, Тхорик Фирдаус је написао одличан чланак о почетку рада са Сасс-ом који вам је показао како да инсталирате и користите овај веома користан језик ЦСС препроцесора (можда желите да га проверите, знате, да бисте почели).
У овом чланку сам помислио да ћу вам дати мало више увида у то шта можете да урадите са Сассом и како га програмери користе сваки дан да би створили бољи и модуларнији ЦСС код. Пређите напред до жељеног одељка:
- средства трговине
- Променљиве
- Нестинг
- Проширивање скупова правила
- Микинс
- Плацехолдер Селецторс
- Оператионс
- Функције
Средства трговине
Тхорик вам је показао како можете користити Сасс из командне линије користећи сасс --ватцх команду.
Ако више волите ГУИ алате, можете ићи с мојом особном омиљеном апликацијом, Цодекит, веб девелопер алатом за компајлирање Сасс, уланчавање, аутопрефикинг и још много тога. Препрос је још једна врло способна апликација која се може користити на свим системима. Обоје смо плаћене апликације али се исплати ако их користите на дуге стазе.
Ако само желите да испробате Сасс без плаћања било чега можете користити терминал, или Коала (ево нашег прегледа), бесплатну апликацију обогаћену значајкама, која може да задржи своју предност у односу на премијере.
Променљиве
Једна од првих ствари коју ћете морати да замотате је варијабле. Ако долазите из ПХП или сличног позадинског језика кодирања, то ће вам бити друга природа. Варијабле су за складиштење битова и делова информација за вишекратну употребу, као вредност боје, на пример:
$ примари_цолор: # 666666; .буттон цолор: $ примари_цолор; .импортант цолор: $ примари_цолор;
Ово се можда не чини корисним овдје, али замислите да имате 3000 линија кода. Ако се ваша схема боја промени, треба да замените сваку вредност боје у ЦСС-у. Са Сассом можете само модификујте вредност од $ примари_цолор варијабла и урадити с њом.
За променљиве се користе чување имена фонтова, величина, боја и мноштво других информација. За веће пројекте може се исплатити вађење свих ваших варијабли у посебан фајл (погледаћемо како се то ради ускоро). То вам омогућава да промените боју читавог пројекта и промените фонтове и друге кључне аспекте без додиривања актуелних ЦСС правила. Све што треба да урадите је да модификујете неке променљиве.
Нестинг
Још једна основна особина коју вам даје Сасс је могућност гнијежђења правила. Претпоставимо да правите навигациони мени. Имате нав елемент који садржи неуређену листу, ставке листе и линкове. У ЦСС-у можете урадити нешто овако:
#хеадер нав / * Правила за навигационо подручје * / #хеадер нав ул / * Правила за мени * / #хеадер нав ли / * Правила за ставке пописа * / #хеадер нав а / * Правила фор линкс * /
У селекторима се много понављамо. Ако елементи имају заједничке коријене, можемо користити и гнијежђење напишите наша правила на много чистији начин.
Ево како би горњи код могао изгледати у Сасс-у:
#хеадер нав / * Правила за навигационо подручје * / ул / * Правила за мени * / ли / * Правила за ставке пописа * / а / * Правила за везе * /
Гнијежђење је изузетно корисно зато што је то чини стилске табеле (много) читљивијим. Коришћењем гнезда заједно са одговарајућим удубљењем можете постићи високо читљиве структуре кодова, чак и ако имате поштену количину кода.
Један недостатак гнијежђења је да може довести до непотребне специфичности. У горњем примеру сам се позвао на везе са #хеадер нав а. Можеш такође да користиш #хеадер нав ул ли што би вероватно било превише.
У Сассу је много лакше бити врло специфичан, јер све што треба да урадите је да угнијездите своја правила. Следеће је далеко мање читљиво и сасвим специфично.
#хеадер нав / * Правила за навигациону област * / ул / * Правила за мени * / ли / * Правила за ставке пописа * / а / * Правила за везе * /
Проширивање скупова правила
Проширење ће бити познато ако радите са објектно оријентисаним језицима. Најбоље је разумети кроз пример, креирамо 3 дугмета која су мале варијације једна од друге.
.буттон дисплаи: инлине-блоцк; цолор: # 000; бацкгроунд: # 333; бордер-радиус: 4пк; паддинг: 8пк 11пк; .буттон-примари @ектенд .буттон; бацкгроунд: # 0091Ц2 .буттон-смалл @ектенд .буттон; фонт-сизе: 0.9ем; паддинг: 3пк 8пк;
Тхе .буттон-примари и .буттон-смалл све класе продужавају .дугме класа, што значи да они преузимају све њене особине и онда дефинишу своје.
Ово је изузетно корисно у многим ситуацијама у којима се могу користити варијације елемента. Поруке (упозорење / успех / грешка), дугмад (боје, величине), типови менија и тако даље могу користити функционалност проширења за велику ефикасност ЦСС-а.
Једно упозорење о продужењу је то неће радити у медијским упитима као што бисте очекивали. Ово је мало напредније, али можете прочитати све о овом понашању у Разумијевању Плацехолдер селектора - селектори за резервисана места су посебна врста проширења о којој ћемо ускоро разговарати..
Микинс
Микинс су још једна омиљена особина корисника процесора. Микинс су скуп правила за вишекратну употребу - савршени за правила специфична за продавце или за скраћивање дугих ЦСС правила.
Како о креирању правила транзиције за елементе ховер:
@микинг ховер-еффецт -вебкит-транситион: бацкгроунд-цолор 200мс; -моз-транзиција: позадинска боја 200мс; -о-транзиција: позадинска боја 200мс; транзиција: позадинска боја 200мс; а @ укључи ховер-ефекат; .буттон @инцлуде ховер-еффецт;
Микинс вам такође дозвољавају да користите променљиве за дефинишите вредности унутар микина. Можемо да препишемо горе наведени пример дајемо нам контролу над тачним временом транзиције. Можда ћемо желети да тастери прелазе мало спорије, на пример.
@микин ховер-еффецт ($ спеед) -вебкит-транситион: бацкгроунд-цолор $ спеед; -моз-транситион: бацкгроунд-цолор $ спеед; -о-транзиција: позадинска боја $ спеед; транзиција: позадинска боја $ спеед; укључити ховер-ефекат (200мс); .буттон @инцлуде ховер-еффецт (300мс);
Плацехолдер Селецторс
Селектори резервисаних места су представљени са Сасс 3.2 и решили су проблем који може проузроковати мало надимање у генерисаном ЦСС коду. Погледајте овај код који ствара поруке о грешкама:
.порука фонт-сизе: 1.1ем; паддинг: 11пк; бордер-видтх: 1пк; гранични стил: солид; .мессаге-дангер @ектенд .мессаге; позадина: # Ц20030; цолор: #ффф; бордер-цолор: # А8002А; .мессаге-суццесс @ектенд .мессаге; позадина: # 7ЕА800; цолор: #ффф; бордер-цолор: # 6Б8Ф00;
Вероватно је да се класа порука никада неће користити у нашем ХТМЛ-у: била је створена да се прошири, не користи као што је. Ово узрокује мало напухавања у генерисаном ЦСС-у. Да би ваш код био ефикаснији, можете користити селектор за означавање места који је означен знаком процента:
% мессаге фонт-сизе: 1.1ем; паддинг: 11пк; бордер-видтх: 1пк; гранични стил: солид; .мессаге-дангер @ектенд% буттон; позадина: # Ц20030; цолор: #ффф; бордер-цолор: # А8002А; .мессаге-суццесс @ектенд% буттон; позадина: # 7ЕА800; цолор: #ффф; бордер-цолор: # 6Д9700;
У овој фази можда се питате која је разлика између продужења и микинс-а. Ако користите плацехолдер, они се понашају као микин без параметара. То је тачно, али излаз у ЦСС-у се разликује. Разлика је у томе микинс дуплицате рулес док плацехолдери ће осигурати да иста правила дијеле селекторе, резултирајући мање ЦСС-а на крају.
Оператионс
Тешко је одолети досјетки, али за сада ћу се уздржати од било каквих медицинских шала. Оператери вам дозвољавају да направите математику у свом ЦСС коду и можете бити прилично корисни. Пример у Сасс водичу је савршен за приказивање овог:
.контејнер ширина: 100%; чланак флоат: лево; ширина: 600пк / 960пк * 100%; асиде флоат: ригхт; ширина: 300пк / 960пк * 100%;
Горњи пример креира решетку базирану на 960пк са минималним проблемима. Он ће се лепо саставити на следећи ЦСС:
.контејнер ширина: 100%; чланак флоат: лево; ширина: 62,5%; асиде флоат: ригхт; ширина: 31,25%;
Једна велика употреба коју могу да нађем за операције је да заправо комбинујем боје. Ако погледате поруку успјеха Сасс изнад, није јасно да боја позадине и границе имају неку врсту везе. Одузимањем нијансе сиве боје можемо потамнити боју, чинећи везу видљивом:
$ примари: # 7ЕА800; .мессаге-суццесс @ектенд% буттон; бацкгроунд: $ примари; цолор: #ффф; бордер-цолор: $ примари - # 111;
Свјетлија одузета боја, што је тамнија резултирајућа нијанса. Лакша је додана боја, што је светлија.
Функције
Постоји велики број функција које се могу користити: Функције бројева, функције низа, функције пописа, функције боја и још много тога. Погледајте дугу листу у документацији програмера. Ја ћу погледати пар овде само да вам покажем како они раде.
Тхе лигхтен и потамни Функција се може користити за промену осветљености боје. Ово је боље него одузимање нијанси, све чини још модуларнијим и очигледнијим. Погледајте наш претходни пример користећи функцију потамњивања.
$ примари: # 7ЕА800; .мессаге-суццесс @ектенд% буттон; бацкгроунд: $ примари; цолор: #ффф; бордер-цолор: даркен ($ примари, 5);
Други аргумент функције је проценат потребног затамњења. Све функције имају параметре; погледајте документацију да видите шта је то! Ево неколико других функција боја које су саме по себи разумљиве: десатурате, сатурате, инверт, граисцале.
Тхе цеил функција, као у ПХП-у, враћа број заокружен на следећи цео број. Ово се може користити при израчунавању ширине ступаца или ако не желите користити много децималних мјеста у коначном ЦСС-у.
.титле фонт-сизе: цеил ($ хеадер_сизе * 1.3314);
Преглед
Функције у Сасс-у дају нам велику моћ да боље пишемо ЦСС са мање напора. Правилно коришћење миксина, проширења, функција и променљивих ће учинити наше стилове више одрживим, читљивијим и лакшим за писање.
Ако сте заинтересовани за неки други сличан ЦСС процесор, предлажем да погледате ЛЕСС (или проверите водич за почетнике) - основни принцип је исти!
