How to build Online vCard using Sass & Compass

sass vcard

Hello friends today we gonna learn about How to build Online vCard using Sass & Compass. So read this article, How to build Online vCard using Sass & Compass step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: How to build Online vCard using Sass & Compass

Today we are going to continue our discussion about Sass and this is going to be the final part of our Sass series. This time, this is not going to be a theoretical approach, but a bit more practical. We will create an online vCard with Sass together with Compass.

The idea is that the vCard can be easily customized in terms of color and size. In the process we’ll be using a few Sass and Compass features Like it Variables, Mixins, Operations, Selectors Inheritance, Nested Rules and Compass helpersIf you missed our previous posts from this series, we recommend that you check them out before continuing.

back to menu ↑

Planning and wireframing

When working with Sass and Compass, planning is essentialWe usually need an overall picture of how our final result (eg page or website) will be. It will be helpful to browse for ideas on some sites, such as Behance or Dribbble. We can then write the ideas on paper or construct them in a wireframe, as in this example below.

As you can see from the picture above, it includes our vCard contact information about ‘John’ – a photo profile, some information about John, such as his name, email address, phone number and a brief description of who he is or what he does. That will be our ‘bio’ section.

Below are his social identities in the form of social buttonsThis will be our ‘social’ section.

back to menu ↑

Prepare assets

Before we get into coding, here are some essentials to prepare. I understand that you should now have Sass and Compass installed on your computer.

(If you’re not sure if you have them installed, you can pass this command sass -v or compass -v Command Prompt or Terminal or you can always use an application like Scout App if you prefer to work with a GUI.)

We’ll also need a few resources like font icons and social media icons, which you can get from places like ModernPictograms.

Finally, because we are using Command Prompt / Terminal for this tutorial, we need to navigate to our directory and run Compass project with these two commands: compass init and compass watch.

compass watch

back to menu ↑

HTML formatting

Below is the HTML formatting of our vCard, it is quite simple. All sections are wrapped in logical HTML5 tag


  • Thoriq Firdaus
  • < li class = ”phone”> (+ 62) 1.2345.678.9

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dolor neque, eleifend on pellentesque quis, convallis sit amet tellus. Etiam et auctor arcu.

< / div>

As you can see above, the social identities included in the ‘social’ section is structured in list elements so that we can easily display them side by side. Each of them is given a class name according to this convention social-facebook, social-twitter, social-google and so on.

back to menu ↑

Compass configuration

We have to configure Compass a bit by removing a few lines in the config.rb file, like this:

# You can select your preferred output style here (can be overridden from the command line): output_style =: expanded

# To enable relative paths to assets through compass helper functions. Uncomment: relative_assets = true

# To disable debugging notes showing the original location of your selectors. Uncomment: line_comments = false

If you can’t find the config.rb file, you probably didn’t run this compass init command in your project directory.

back to menu ↑

Import files

Since we are going to use Compass, we have to import it with;

@import “compass”;

And my personal preference is to reset the browsers’ default styles so that the output appears more consistently. In this case, Compass has a Reset module. This module is based on Eric Meyer’s CSS reset and can be imported with;

@import “compass / reset”;

However, I prefer to normalize that happily also comes in Sass / Scss format. Download the file here, save it in the working directory of SASS and import it into our stylesheet.

@import “normalize”;

Recommended reading: View priority level CSS style

back to menu ↑


We will definitely have some constant values ​​in the stylesheet, so we will store them in variables and these two variables below will determine the base color of our vCard.

$ base: #fff; $ dark: darken ($ base, 10%);

While the $ width variable below is the width of our page; it will also be the basis for defining other element dimensions.

$ width: 500px; $ space: $ width / 25; // = 20 px

And the $ space variable, as you can see, is the standard spacing or column size in our vCard, which would be 20px in this example;

sass column

Compass also has Helpers to detect image size and we’ll make use of that feature on our photo profile, as follows;

$ img: image-width (“me.jpg”) + (($ space / 4) * 2);

The additional Addition of (($ space / 4) * 2) in the above code, is to calculate the total image width including the border that will frame the image. A frame usually has two sides; top and bottom / left and right, so we multiply the division result by 2.

back to menu ↑

Selector Inheritance

There are apparently a few selectors in our stylesheet that will have the same style rules. To avoid repetition in our code, we’ll need to specify these styles in the first place and inherit them with the @extend directive when needed. This method is known in Sass as Selector Inheritance, very convenient feature that is missing in LESS.

.float-left {float: left;}. box-sizing {@include box-sizing (border-box);}

back to menu ↑


Once everything needed is set, it’s time to style our vCard, starting with a background color for our HTML document;

html {height: 100%; background color: $ base;}

back to menu ↑


The following styles define the vCard wrapper. If you’ve worked with LESS before, this code will look familiar and be easy to digest.

.vcard {width: $ width; margin: 50px auto; background-color: darken ($ base, 5%); border: 1px solid $ dark; @include border-radius (3px); ul {padding: 0; margin: 0; li {list style: none;}}}

The width of the wrapper inherits the value of the variable $ width. The background color will be 5% darker of the base color, while the border color will be 10% darker. This coloring is achieved using Sass coloring functions.

The vCard also has a 3 px radius with rounded corners that is achieved with Compass CSS3 Mixins; border radius (3px).

back to menu ↑

Bio Section

As we mentioned before tutorial, the vCard can be divided into two sections. These nested styles below define the first section that contains the picture profile with a few details (name, email, and phone

.bio {border-bottom: 1px solid $ dark; padding: $ space; @extend .box-sizing; img {@extend .float-left; display: block; border: ($ space / 4) solid #ffffff;} .detail {@extend .float-left; @extend .box-sizing; color: darken ($ base, 50%); margin: {left: $ space; bottom: $ space / 2;} width: $ width – (($ space * 3) + $ img); li {&: before {width: $ space; height: $ space; margin-right: $ space; font-family: “ModernPictogramsNormal”;} &. name: before {content: “F”;} &. Email: for {content: “m”;} &.phone: for {content: “N”;}}}}

There is one thing from the above code that we think you should keep in mind. The width in .detail selector is specified with this equation $ width – (($ space * 3) + $ img);.

This equation is used to dynamically calculate the width of the detail by subtracting the width of the image profile and the spaces (padding and margin) from the total width of the vCard.

sass comparison

back to menu ↑

Social section

The styles below are for the second section in the vCard. There is really no difference here from regular CSS, only they are now nested and a few values ​​are defined with variables.

.social {background-color: $ dark; width: 100%; padding: $ space; @extend .box-sizing; ul {text-align: center; li {display: inline-block; width: 32px; height: 32px; a {text-decoration: none; display: inline-block; width: 100%; height: 100%; text-indent: 100%; white-space: nowrap; overflow: hidden;}}}}

In this section, we will display the social media icons using the image sprite technique, and Compass has one feature to do that work faster.

First of all, we need to put our icons in a special folder – let’s name the folder / social /, for example. Back in the style sheet, merge those icons with the following @import line.

@import “social / *. png ”;

The social / above refer to the folder where we store the icons. This folder must be nested in the folder with images. Now if we look in our image folder, we should see a sprite image generated with random characters like social-sc805f18607.pngAt this point still nothing will happen on the front until we apply the styles with the following line.

@include all-social-sprites;

back to menu ↑

Final Result

Finally, after all the hard work, we can now see the result like this:

sass vcard

In case we later think that 500px is too wide, we just need to change the value in $ width variable – 350px for example – the rest will be “magically” adjusted. You can also experiment with the color variable.

sass vcard blue

  • Watch demo
  • Download source
back to menu ↑


In this tutorial we showed you how to build a simple online vCard with Sass and Compass; however, this is just an example. Sass and Compass are indeed powerful, but sometimes it is not necessary. For example, when we are working on a website with a few pages and probably need fewer styles with styles as well, using Sass and Compass is considered excessive.

This post concludes our Sass series and we hope you enjoyed it. If you have any questions on this topic, don’t hesitate to add them in the comments box below.

back to menu ↑

How to build Online vCard using Sass & Compass: benefits

  • The How to build Online vCard using Sass & Compass tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the How to build Online vCard using Sass & Compass guide is free.

back to menu ↑


Tutorial summary of How to build Online vCard using Sass & Compass

In this guide, we told you about the How to build Online vCard using Sass & Compass; please read all steps so that you understand How to build Online vCard using Sass & Compass in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the How to build Online vCard using Sass & Compass, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the How to build Online vCard using Sass & Compass tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop

back to menu ↑

Final note

I hope you like the guide How to build Online vCard using Sass & Compass. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the How to build Online vCard using Sass & Compass, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “How to build Online vCard using Sass & Compass”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide How to build Online vCard using Sass & Compass, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.