Сасс Туториал Изградња онлине вЦард са Сасс & Цомпасс
Данас ћемо наставити расправу о Сассу и ово ће бити завршни дио наше Сасс серије. Овај пут, а не теоријски приступ, ово ће бити мало практичније. Направићемо онлајн вЦард користећи Сасс заједно са компасом.
Идеја је да вЦард мора бити лако прилагодљив, за боју и величину. У том процесу користићемо неколико Сасс и Цомпасс карактеристика Варијабле, комбинације, операције, наслеђивање селектора, уграђена правила и Цомпасс Хелперс. Ако сте пропустили наше претходне постове из ове серије, предлажемо да их погледате пре него што наставите.
Планирање и Вирефраминг
Када радите са Сасс и Цомпасс, планирање је од суштинског значаја. Ми обично требамо имати велику слику о томе како ће бити коначни резултат (нпр. Страница или веб локација). Било би корисно прегледати неке локације као што су Беханце или Дрибббле за идеје. Онда можемо да нацртамо идеје на папир или да их конструишемо у оквиру, као што је овај пример испод.
Као што можете видети на слици изнад, наша вЦард садржи контакт информације о 'Јохн' - профилу слике, неким информацијама о Јохну, као што су његово име, е-маил адреса, број телефона и кратак опис о томе ко је он или шта ради. То ће бити наша "био" секција.
У наставку су његови друштвени идентитети у облику друштвених дугмади. Ово ће бити наша "социјална" секција.
Препаринг Ассетс
Пре него што почнемо са кодирањем, ево неких битних ствари за припрему. Схватам да сте до сада требали имати Сасс и Цомпасс инсталиране у вашој машини.
(Ако нисте сигурни да ли сте их инсталирали, можете покренути ову наредбу сасс -в или цомпасс -в кроз Цомманд Промпт или Терминал или, увек можете да користите апликацију као што је Сцоут Апп ако вам је драже да радите са ГУИ-јем.)
Такође нам је потребно неколико средстава као што су иконе фонтова и иконе друштвених медија, које можете добити од места као што је МодернПицтограмс.
На крају, пошто користимо Цомманд Промпт / Терминал за овај водич, потребно је да пређемо на наш директоријум и покренемо Цомпасс пројекат са ове две команде: цомпасс инит и сат компаса.
ХТМЛ Маркуп
Испод је ХТМЛ ознака за нашу вЦард, прилично је једноставна. Све секције су омотане у логичку ХТМЛ5 ознаку .
Као што можете видети горе, социјални идентитети укључени у 'друштвену'Одељак је структуиран унутар елемената листе тако да их лако можемо приказати један поред другог. Свако од њих добија назив класе који прати ову конвенцију социал-фацебоок, социал-твиттер, социал-гоогле и тако даље.
Конфигурација компаса
Морамо мало да конфигуришемо компас тако што ћемо рекоменисати неколико редова цонфиг.рб филе, како следи:
# Овде можете да изаберете жељени стил излаза (може се заменити преко командне линије): оутпут_стиле =: екпандед # Да бисте омогућили релативне путање средстава преко помоћних функција компаса. Унцоммент: релативе_ассетс = труе # Да бисте онемогућили дебуггинг коментаре који приказују оригиналну локацију ваших селектора. Унцоммент: лине_цомментс = фалсе
Ако не можете да нађете цонфиг.рб датотеку, вероватно нисте покренули ову команду цомпасс инит у директоријуму пројекта.
Импортинг Филес
Пошто ћемо користити компас, потребно га је увести користећи;
@импорт "компас";
Моје је лично склоност да ресетујем подразумеване стилове из претраживача, тако да ће излаз бити приказан конзистентније. Компас, у овом случају, има модул Ресет. Овај модул је заснован на ЦСС ресетовању Ерица Меиера и може се увозити помоћу;
@импорт "компас / ресет";
Међутим, ја радије користим Нормализе то тханкфулли такође долази у Сасс / Сцсс формату. Преузмите датотеку овде, сачувајте је сасс радни директоријум и увезите га у наш стилски лист.
@импорт "нормализе";
Препоручено читање: Прегледајте ниво приоритета ЦСС стила
Променљиве
Свакако ћемо имати неколико константних вриједности у стилу, тако да ћемо их похранити у варијабле и ове двије варијабле ће дефинирати основну боју наше вЦард..
$ басе: #ффф; $ дарк: потамни ($ басе, 10%);
Док $ видтх променљива испод ће бити ширина наше странице; она ће такође бити основа за дефинисање других величина елемената.
$ видтх: 500пк; $ простор: $ видтх / 25; // = 20пк
И то $ спаце варијабла, као што можете видјети, ће бити дефаулт размак или величина ступца у нашој вЦард-у, што је у овом примјеру 20пк;
Компас такође има и помагаче за откривање величине слике и ми ћемо користити ову функцију на нашем профилу слике, као што следи;
$ имг: ширина слике ("ме.јпг") + (($ спаце / 4) * 2); Екстра Аддитион оф (($ спаце / 4) * 2) у горњем коду, је да израчунате укупну ширину слике, укључујући и границу која ће уоквирити слику. Оквир има две стране; горе и доле / лево и десно, зато умножавамо резултат поделе од стране 2.
Селецтор Инхеританце
Очигледно је да постоји неколико селектора у нашем стилу који ће имати иста правила стила. Да бисмо избегли понављање у нашем коду, мораћемо прво да наведемо те стилове и да их наследимо са @проширити кад год је то потребно. Овај метод, у Сассу, познат је као Селецтор Инхеританце, веома корисна функција која недостаје у ЛЕСС.
.флоат-лефт флоат: лево; .бок-сизинг @инцлуде бок-сизинг (бордер-бок);
Стилови
Када је све што је потребно је подешено, онда је време да стилизујемо нашу вЦард, почевши од боје позадине до нашег ХТМЛ документа;
хтмл висина: 100%; бацкгроунд-цолор: $ басе;
вЦард
Следећи стилови дефинишу вЦард омотач. Ако сте раније радили са ЛЕСС-ом, овај код ће вам бити познат и лако сварљив.
.вцард видтх: $ видтх; маргин: 50пк ауто; бацкгроунд-цолор: даркен ($ басе, 5%); бордер: 1пк солид $ дарк; @инцлуде бордер-радиус (3пк); ул паддинг: 0; маргин: 0; ли лист-стиле: ноне;
Ширина омотача наслеђује вредност од $ видтх променљива. Боја позадине је тамнија 5% од основне боје, док ће боја обруба бити тамнија 10%. Ово бојење се постиже коришћењем Сасс функција боја.
ВЦард ће такође имати 3пк радијус заобљених углова који се постиже помоћу компаса ЦСС3 Микинс; бордер-радиус (3пк).
Био Сецтион
Као што смо раније приметили у овом упутству, вЦард се може поделити на два дела. Ови уграђени стилови испод ће дефинисати први одељак који садржи профил слике са неколико детаља (име, е-пошта и телефон).
.био бордер-боттом: 1пк солид $ дарк; паддинг: $ спаце; @ектенд .бок-сизинг; имг @ектенд .флоат-лефт; дисплеј блок; бордер: ($ спаце / 4) солид #фффффф; .детаил @ектенд .флоат-лефт; @ектенд .бок-сизинг; цолор: даркен ($ басе, 50%); маргин: лефт: $ спаце; дно: $ спаце / 2; видтх: $ видтх - (($ спаце * 3) + $ имг); ли &: бефоре видтх: $ спаце; хеигхт: $ спаце; маргин-ригхт: $ спаце; фонт-фамили: "МодернПицтограмсНормал"; & .наме: бефоре цонтент: "ф"; & .емаил: пред цонтент: "м"; & .пхоне: пред цонтент: "Н";
Постоји једна ствар из горњег кода, за коју мислимо да треба да примите обавештење. Ширина у .детаљ Овим се изједначује селектор $ видтх - (($ спаце * 3) + $ имг);.
Ова једначина се користи за динамичко израчунавање детаља видтх одузимањем ширине профила слике и размака (паддинг и маргин) од укупне ширине вЦард.
Социал Сецтион
Доњи стилови су за други део вЦард-а. Овде заправо нема разлике са обичним ЦСС-ом, само сада су угњеждени, а неколико вредности дефинисано је променљивим.
.социал бацкгроунд-цолор: $ дарк; ширина: 100%; паддинг: $ спаце; @ектенд .бок-сизинг; ул тект-алигн: центер; ли дисплаи: инлине-блоцк; видтх: 32пк; хеигхт: 32пк; а тект-децоратион: ноне; дисплеј: инлине-блоцк; ширина: 100%; висина: 100%; тект-индент: 100%; вхите-спаце: новрап; оверфлов: хидден;
У овом одељку приказаћемо иконе друштвених медија користећи технику сприте слике, а Цомпасс има функцију која брже обавља тај посао.
Пре свега, треба да ставимо наше иконе у посебну фасциклу - рецимо име фасцикле / социал /, на пример. Назад у табели стилова, спојите те иконе са следећим @увоз правило.
@импорт "социал / *. пнг";
Тхе друштвени / горе се односи на фасциклу у којој чувамо иконе. Ова фасцикла треба да буде угнијежђена унутар мапе са сликама. Сада, ако погледамо у наш директоријум са сликама, требало би да видимо слику спрајт-а генерисану случајним знаковима, на пример социал-сц805ф18607.пнг. У овом тренутку, ништа се још увек не дешава на фронт-енд-у, док не применимо стилове на следећи ред.
@ укључити све-социјалне-духове;
Крајњи резултат
Коначно, након напорног рада сада можемо видјети резултат као што је овај:
У случају да тако мислимо 500пк касније је прешироко, само требамо промијенити вриједност у $ видтх променљива - на пример, 350пк - остало ће “магицалли” бе адјустед. Такође можете експериментисати са променљивом боје.
- Виев Демо
- Довнлоад Соурце
Закључак
У овом водичу смо вам показали како да направите једноставну вЦард са Сасс и Цомпасс; ово је само пример. Сасс и Цомпасс су заиста моћни, али понекад то није потребно. На пример, када радимо на веб сајту са неколико страница и вероватно ће вам требати само мање линија стилова, коришћење Сасс и Цомпасс се сматра претераним.
Овај пост затвара Сасс серију и надамо се да сте уживали. Ако имате било какво питање у вези са овом темом, не устручавајте се да је додате у поље за коментар испод.
