Sass Инструкция Изграждане на онлайн визитка с Sass & Compass

Днес ще продължим дискусията си на Sass и това ще бъде последната част от нашата серия Sass. Този път, а не теоретичен подход, това ще бъде малко по-практично. Ще създадем онлайн визитка с помощта на Sass заедно с Compass.

Идеята е визитката да е лесно регулируема, за цвят и размер. В този процес ще използваме няколко функции на Sass и Compass Променливи, миксини, операции, наследяване на селектори, вложени правила и Помощници от компас. Ако сте пропуснали предишните ни публикации от тази поредица, предлагаме ви да ги разгледате първо, преди да продължите.

Планиране и Wireframing

При работа със Sass и Compass, планирането е от съществено значение. Обикновено трябва да имаме обща картина как ще бъде крайният ни резултат (например страница или уебсайт). Ще бъде полезно да прегледате някои сайтове като Behance или Dribbble за идеи. След това можем да изготвим идеите на хартия или да ги конструираме в тел, като този пример по-долу.

Както можете да видите от изображението по-горе, нашата vCard съдържа Информация за контакт за „Джон“ - профил на снимка, информация за Джон, като например неговото име, имейл адрес, телефонен номер и кратко описание за това кой е той или какво прави. Това ще бъде нашата "био" секция.

По-долу са неговите социални идентичности под формата на социални бутони. Това ще бъде нашата "социална" секция.

Подготовка на активи

Преди да започнем кодирането, ето някои важни неща, за да се подготвим. Разбирам, че вече трябва да имате инсталирани Sass и Compass във вашата машина.

(Ако не сте сигурни дали сте ги инсталирали, можете да изпълните тази команда sass -v или компас -v през Команден ред или терминал или, винаги можете да използвате приложение като Scout App, ако предпочитате да работите с GUI.)

Ние също ще се нуждаем от няколко актива като икони на шрифтове и икони на социални медии, които можете да получите от места като ModernPictograms.

И накрая, тъй като използваме Command Prompt / Terminal за този урок, трябва да навигираме в нашата директория и да стартираме проекта Compass с тези две команди: компас init и часовник на компас.

HTML Markup

По-долу е HTML маркировката на нашата vCard, това е доста лесно. Всички секции са опаковани в логически HTML5 маркер

      Торик Фирдаус
 [email protected]
 (+62) 1.2345.678.9
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ограничаване на долната страна, извисяване и отпускане на лицето. Etiam et auctor arcu.
 
 
 
   Facebook
  кикотене
 Google+
 Dribbble

Както можете да видите по-горе, социалните идентичности, включени в „социалното“Разделът е структуриран в елементите на списъка, за да можем лесно да ги покажем рамо до рамо. На всеки от тях се дава име на класа, следвайки тази конвенция социално-фейсбук, социално-Twitter, социално-Google и така нататък.

Конфигурация на компаса

Трябва малко да конфигурираме Compass, като разкоментираме няколко реда в config.rb файл, както следва:

 # Тук можете да изберете предпочитания от вас изходен стил (може да бъде отменен чрез командния ред): output_style =: expanded # За да активирате относителни пътища към активи чрез помощни функции на компаса. Uncomment: relative_assets = true # За да деактивирате коментарите за отстраняване на грешки, които показват първоначалното местоположение на селекторите ви. Разкоментиране: line_comments = false

Ако не можете да намерите config.rb файл, вероятно не сте стартирали тази команда компас init в директорията на проекта.

Импортиране на файлове

Тъй като ще използваме Compass, трябва да го импортираме с помощта на;

 @import "компас";

И моето лично предпочитание е да възстановя по подразбиране стиловете от браузърите, така че изходът да се визуализира по-последователно. Компасът в този случай има модул Reset. Този модул е базиран на CSS нулирането на Ерик Майер и може да бъде импортиран с помощта на;

 @import "компас / нулиране";

Въпреки това, аз предпочитам да използвам Normalize, че за щастие също се предлага в Sass / Scss формат. Изтеглете файла тук, запазете го дръзки приказки работна директория и да я импортирате в нашата стилова таблица.

 @import "нормализиране";

Препоръчително четене: Преглед на CSS стил приоритет ниво

Променливи

Ние със сигурност ще имаме няколко константни стойности в стиловата таблица, така че ще ги съхраним в променливи и тези две променливи по-долу ще определят основния цвят на нашата vCard..

 $ base: #fff; $ dark: потъмнява ($ base, 10%);

Докато ширина $ променливата по-долу ще бъде ширината на нашата страница; тя също ще бъде основа за определяне на други размери на елементите.

 $ ширина: 500px; $ пространство: $ width / 25; // = 20px

И $ пространство променливата, както можете да видите, ще бъде интервал по подразбиране или размер на колона в нашата vCard, която в този пример ще бъде 20px;

Компас също има помощници за откриване на размера на изображението и ние ще използваме тази функция на нашия профил на снимката, както следва;

 $ img: ширина на изображението ("me.jpg") + (($ space / 4) * 2);

Екстра допълнение на (($ space / 4) * 2) в горния код е да се изчисли общата ширина на изображението, включително и границата, която ще оформи картината. Рамката обикновено има две страни; отгоре и отдолу / отляво и отдясно, затова умножаваме резултат от 2.

Наследяване на селектора

Очевидно има няколко селектора в нашия стил, които ще имат едни и същи правила за оформяне. За да избегнем повторение в нашия код, ще трябва първо да посочим тези стилове и да ги наследим с @разшири когато е необходимо. Този метод, в Sass, е известен като Наследяване на селектора, много полезна функция, която липсва в LESS.

 .float-left float: left;  .box-sizing @include box-sizing (гранична кутия);

Стилове

Когато всичко, което е необходимо, е настроено, тогава е време да оформим нашата визитка, започвайки с цвят на фона на нашия HTML документ;

 html височина: 100%; фонов цвят: $ base;

визитка

Следните стилове определят обвивката на vCard. Ако сте работили с LESS по-рано, този код ще ви бъде познат и лесен за възприемане.

 .vcard width: $ width; марж: 50px авто; фонов цвят: потъмнява ($ base, 5%); граница: 1px солидна $ тъмна; @include border-radius (3px); ul padding: 0; марж: 0; li list-style: няма;

Ширината на обвивката наследява стойността от ширина $ променлива. Цветът на фона е по-тъмен от 5% от основния цвят, докато цветът на рамката ще бъде по-тъмен 10%. Това оцветяване се постига чрез използване на цветовите функции на Sass.

Визитката също ще има 3px радиус на заоблени ъгли, който се постига с използване на Compass CSS3 Mixins; гранично-радиус (3px).

Bio секция

Както отбелязахме по-рано в този урок, визитката може да бъде разделена на две части. Тези вложени стилове по-долу ще дефинират първия раздел, съдържащ профила на картината, с няколко подробности (име, имейл и телефон).

 .bio граница-дъно: 1px солидно $ тъмно; подложка: $ space; @extend .box-sizing; img @extend .float-left; дисплей: блок; граница: ($ space / 4) твърдо #ffffff;  .detail @extend .float-left; @extend .box-sizing; цвят: потъмнява ($ база, 50%); марж: left: $ space; дъното: $ space / 2;  ширина: $ ширина - (($ space * 3) + $ img); li &: before width: $ space; височина: $ пространство; margin-right: $ space; семейство на шрифта: "ModernPictogramsNormal";  & .name: преди съдържание: "f";  & .email: преди съдържание: "m";  & .phone: преди съдържание: "N";

Има едно нещо от горния код, за което смятаме, че трябва да вземете уведомление. Ширината в .детайл С това уравнение се определя селекторът $ width - (($ space * 3) + $ img);.

Това уравнение се използва за динамично изчисляване на детайлите широчина чрез изваждане на ширината на профила на картината и интервалите (подложка и поле) от общата ширина на vCard.

Социална секция

Стиловете по-долу са за втората част на vCard. Всъщност тук няма разлика с обикновения CSS, само сега те са вложени и няколко стойности са дефинирани с променливи.

 .социален фонов цвят: $ тъмен; ширина: 100%; подложка: $ space; @extend .box-sizing; ul text-align: center; li дисплей: вграден блок; ширина: 32px; височина: 32px; a text-decoration: none; дисплей: вграден блок; ширина: 100%; височина: 100%; text-indent: 100%; бяло пространство: nowrap; overflow: hidden;

В този раздел ще покажем иконите на социалните медии, като използваме техниката на sprite image, а Compass има функция, която прави тази работа по-бързо.

На първо място, трябва да поставим нашите икони в специална папка - нека да назовем папката / Социална /, например. Обратно в таблицата със стилове, свържете тези икони със следното @import правило.

 @import "социални / *. png";

Най- социална / по-горе се отнасят до папката, в която съхраняваме иконите. Тази папка трябва да бъде вмъкната в папката с изображения. Сега, ако погледнем в нашата папка с изображения, трябва да видим образ на спрайт, генериран със случайни знаци, например социално-sc805f18607.png. В този момент нищо все още не се случва в предния край, докато не приложим стиловете със следния ред.

 @ включва всички социални-спрайтове;

Краен резултат

И накрая, след цялата упорита работа сега можем да видим следния резултат:

В случай, че мислим така 500px по-късно е твърде широк, трябва само да променим стойността в ширина $ променлива - например, 350px - останалото ще “магически” да се коригира. Можете също да експериментирате с променливата за цвят.

Преглед на демо
Изтеглете Източник

заключение

В този урок ви показахме как да изградите проста онлайн визитка с Sass и Compass; това е само пример. Sass и Compass са наистина мощни, но понякога не е необходимо. Например, когато работим върху уебсайт с няколко страници и вероятно ще се нуждаете само от по-малко линии от стилове, използването на Sass и Compass се счита за прекомерно.

Този пост затваря нашата серия Sass и се надяваме да ви хареса. Ако имате някакви въпроси относно тази тема, не се колебайте да я добавите в полето за коментари по-долу.