{"id":15441,"date":"2012-11-14T21:01:31","date_gmt":"2012-11-14T13:01:31","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=15441"},"modified":"2025-04-04T01:14:23","modified_gmt":"2025-04-03T17:14:23","slug":"sass-compass-vcard","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/sass-compass-vcard\/","title":{"rendered":"Creating an Interactive Online vCard Using Sass & Compass"},"content":{"rendered":"

Today, we\u2019re going to continue our discussion on Sass<\/a>. This time, we\u2019ll take a practical approach and build an online vCard<\/a> using Sass along with Compass<\/a>.<\/p>\n

The goal is to make the vCard easily adjustable for color and size. We\u2019ll utilize several Sass and Compass features, including Variables, Mixins, Operations, Selector Inheritance, Nested Rules<\/strong>, and Compass Helpers<\/strong>. If you missed our previous posts in this series, it\u2019s a good idea to check them out before continuing.<\/p>\n

Planning and Wireframing<\/h2>\n

Planning is essential when working with Sass and Compass. It\u2019s important to have a clear vision of the final result, whether it\u2019s a page or a website. Browsing sites like Behance<\/a> or Dribbble<\/a> can provide inspiration. After gathering ideas, draft them on paper or create a wireframe, like the example below.<\/p>\n

\"Wireframe<\/figure>\n

As shown in the image above, our vCard will include contact info<\/strong> about \u2018John\u2019 \u2013 a profile picture, some information such as his name, email address, phone number, and a brief description of who he is or what he does. This will be our \u2018bio\u2019 section.<\/p>\n

Below that, we\u2019ll have his social identities in the form of social buttons, which will make up our \u2018social\u2019 section.<\/p>\n

Preparing Assets<\/h2>\n

Before we start coding, let\u2019s get some essentials ready. By now, you should have Sass and Compass installed on your machine.<\/p>\n

If you\u2019re unsure whether you have them installed, you can run the command sass -v<\/code> or compass -v<\/code> in the Command Prompt or Terminal<\/strong>. Alternatively, you can use an application like Scout App<\/a> if you prefer working with a GUI.<\/p>\n

We will also need a few assets, such as font icons and social media icons, which you can get from sources like ModernPictograms<\/a>.<\/p>\n

Lastly, since we are using Command Prompt\/Terminal for this tutorial, navigate to your directory and start the Compass project with these commands: compass init<\/code> and compass watch<\/code>.<\/p>\n

\"Compass<\/figure>\n

HTML Markup<\/h2>\n

Below is the HTML markup for our vCard. It\u2019s straightforward, with all sections wrapped within logical HTML5 tags<\/a> like <section><\/code>.<\/p>\n

\r\n<div class=\"vcard\">\r\n  <section class=\"bio cf\">\r\n    <img src=\"images\/me.jpg\" width=\"80\" height=\"80\">\r\n    <div class=\"detail\">\r\n      <ul>\r\n        <li class=\"name\">Thoriq Firdaus<\/li>\r\n        <li class=\"email\">me@email.com<\/li>\r\n        <li class=\"phone\">(+62)1.2345.678.9<\/li>\r\n        <li class=\"desc\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dolor neque, eleifend at pellentesque quis, convallis sit amet tellus. Etiam et auctor arcu.<\/li>\r\n      <\/ul>\r\n    <\/div>\r\n  <\/section>\r\n  <section class=\"social cf\">\r\n    <ul>\r\n      <li class=\"social-facebook\"><a href=\"#\">Facebook<\/a><\/li>\r\n      <li class=\"social-twitter\"><a href=\"#\">Twitter<\/a><\/li>\r\n      <li class=\"social-google\"><a href=\"#\">Google+<\/a><\/li>\r\n      <li class=\"social-dribbble\"><a href=\"#\">Dribbble<\/a><\/li>\r\n    <\/ul>\r\n  <\/section>\r\n<\/div>\r\n<\/pre>\n
As you can see, the social identities in the \u2018social\u2019 section are structured within list elements so we can easily display them side-by-side. Each is given a class name following this convention: social-facebook<\/code>, social-twitter<\/code>, social-google<\/code>, and so on.<\/p>\n
Compass Configuration<\/h2>\n
We need to configure Compass a bit by uncommenting a few lines in the config.rb<\/code> file, as follows:<\/p>\n
\r\n# You can select your preferred output style here (can be overridden via the command line):\r\noutput_style = :expanded\r\n\r\n# To enable relative paths to assets via compass helper functions. Uncomment:\r\nrelative_assets = true\r\n\r\n# To disable debugging comments that display the original location of your selectors. Uncomment:\r\nline_comments = false\r\n<\/pre>\n
If you cannot find the config.rb<\/code> file, you probably haven\u2019t run the command compass init<\/code> in your project directory.<\/p>\n
Importing Files<\/h2>\n
Since we will be using Compass, we need to import it using:<\/p>\n
\r\n@import \"compass\";\r\n<\/pre>\n
I prefer to reset default browser styles so that the output renders more consistently. Compass has a Reset module<\/a> based on Eric Meyer\u2019s CSS reset<\/a>, which can be imported using:<\/p>\n
\r\n@import \"compass\/reset\";\r\n<\/pre>\n
However, I prefer using Normalize<\/a>, which also comes in Sass\/Scss format<\/a><\/strong>. Download the file here<\/a>, save it in your sass<\/code> working directory, and import it into your stylesheet:<\/p>\n
\r\n@import \"normalize\";\r\n<\/pre>\n
Recommended Reading:<\/strong> Reviewing CSS Style Priority Level<\/a><\/p>\n
Variables<\/h2>\n
We will have a few constant values in the stylesheet, so we will store them in variables. These two variables below will define the base color of our vCard.<\/p>\n
\r\n$base: #fff;\r\n$dark: darken($base, 10%);\r\n<\/pre>\n
The $width<\/code> variable below will define our page\u2019s width; it will also serve as the basis for defining other element sizes.<\/p>\n
\r\n$width: 500px;\r\n$space: $width \/ 25; \/\/ = 20px\r\n<\/pre>\n
The $space<\/code> variable, as you can see, will be the default spacing or column size in our vCard, which in this example is 20px<\/code>.<\/p>\n
\"Example<\/figure>\n
Compass also has helpers to detect image size, and we will make use of this feature on our profile picture, as follows:<\/p>\n
\r\n$img: image-width(\"me.jpg\") + (($space \/ 4) * 2);\r\n<\/pre>\n
The extra addition<\/strong> of (($space \/ 4) * 2)<\/code> in the code above is to calculate the total image width, including the border that will frame the picture. A frame generally has two sides; top and bottom \/ left and right<\/strong>, which is why we multiply the division result<\/strong> by 2<\/code>.<\/p>\n
Selector Inheritance<\/h2>\n
There are a few selectors in our stylesheet that share the same styling rules. To avoid repetition in our code, we will specify these styles initially and inherit them with the @extend<\/code> directive whenever needed. This method, in Sass, is known as Selector Inheritance<\/strong>, a very useful feature that is missing in LESS<\/a>.<\/p>\n
\r\n.float-left {\r\n  float: left;\r\n}\r\n.box-sizing {\r\n  @include box-sizing(border-box);\r\n}\r\n<\/pre>\n
Styles<\/h2>\n
Once everything necessary is set up, it\u2019s time to style our vCard, starting with a background color for our HTML document:<\/p>\n
\r\nhtml {\r\n  height: 100%;\r\n  background-color: $base;\r\n}\r\n<\/pre>\n
vCard<\/h3>\n
The following styles define the vCard wrapper. If you have worked with LESS before, this code will look familiar and be easy to understand.<\/p>\n
\r\n.vcard {\r\n  width: $width;\r\n  margin: 50px auto;\r\n  background-color: darken($base, 5%);\r\n  border: 1px solid $dark;\r\n  @include border-radius(3px);\r\n  ul {\r\n    padding: 0;\r\n    margin: 0;\r\n    li {\r\n      list-style: none;\r\n    }\r\n  }\r\n}\r\n<\/pre>\n
The wrapper\u2019s width inherits the value from the $width<\/code> variable. The background color is darkened by 5%<\/code> from the base color, while the border color is darkened by 10%<\/code>. This coloring is achieved using Sass color functions<\/a>.<\/p>\n
The vCard will also have 3px<\/code> rounded corners, achieved using Compass CSS3 Mixins<\/a>: border-radius(3px)<\/code>.<\/p>\n
Bio Section<\/h3>\n
As noted earlier in this tutorial, the vCard can be divided into two sections. These nested styles below define the first section, which contains the profile picture and some details (name, email, and phone).<\/p>\n
\r\n.bio {\r\n  border-bottom: 1px solid $dark;\r\n  padding: $space;\r\n  @extend .box-sizing;\r\n  img {\r\n    @extend .float-left;\r\n    display: block;\r\n    border: ($space \/ 4) solid #ffffff;\r\n  }\r\n  .detail {\r\n    @extend .float-left;\r\n    @extend .box-sizing;\r\n    color: darken($base, 50%);\r\n    margin: {\r\n      left: $space;\r\n      bottom: $space \/ 2;\r\n    }\r\n    width: $width - (($space * 3) + $img);\r\n    li {\r\n      &:before {\r\n        width: $space;\r\n        height: $space;\r\n        margin-right: $space;\r\n        font-family: \"ModernPictogramsNormal\";\r\n      }\r\n      &.name:before {\r\n        content: \"f\";\r\n      }\r\n      &.email:before {\r\n        content: \"m\";\r\n      }\r\n      &.phone:before {\r\n        content: \"N\"; \r\n      }\r\n    }\r\n  }\r\n}\r\n<\/pre>\n
There is one thing in the code above that requires your attention. The width in the .detail<\/code> selector is specified with this equation: $width - (($space * 3) + $img);<\/code>.<\/p>\n
This equation dynamically calculates the .detail<\/code> width by subtracting the profile picture width and the spaces (padding and margin) from the total width of the vCard.<\/p>\n
\"Example<\/figure>\n
Social Section<\/h3>\n
The styles below are for the second section in the vCard. There is no difference with plain CSS here, only now they are nested, and a few values are defined with variables.<\/p>\n
\r\n.social {\r\n  background-color: $dark;\r\n  width: 100%;\r\n  padding: $space;\r\n  @extend .box-sizing;\r\n  ul {\r\n    text-align: center;\r\n    li {\r\n      display: inline-block;\r\n      width: 32px;\r\n      height: 32px;\r\n      a {\r\n        text-decoration: none;\r\n        display: inline-block;\r\n        width: 100%;\r\n        height: 100%;\r\n        text-indent: 100%;\r\n        white-space: nowrap;\r\n        overflow: hidden;\r\n      }\r\n    }\r\n  }\r\n}\r\n<\/pre>\n
In this section, we will display the social media icons using the image sprite technique, and Compass has a feature to do that job faster.<\/p>\n
First, we need to put our icons in a special folder \u2013 let\u2019s name the folder \/social\/<\/strong>. Back in the stylesheet, concatenate those icons with the following @import<\/code> rule.<\/p>\n
\r\n@import \"social\/*.png\";\r\n<\/pre>\n
The social\/<\/code> above refers to the folder where we store the icons. This folder should be nested within the image folder. Now, if we look in our image folder, we should see a sprite image generated with random characters, like social-sc805f18607.png<\/strong>. At this point, nothing happens on the front-end until we apply the styles with the following line:<\/p>\n
\r\n@include all-social-sprites;\r\n<\/pre>\n
Final Result<\/h2>\n
Finally, after all the hard work, we can now see the result like this:<\/p>\n
\"Final<\/figure>\n
If we later think that 500px<\/code> is too wide, we only need to change the value in the $width<\/code> variable \u2013 for example, to 350px<\/code> \u2013 and the rest will adjust accordingly. You can also experiment with the color variable.<\/p>\n
\"Final<\/figure>\n
<\/i>  View demo <\/span><\/a>\n<\/i>  Download source <\/span><\/a><\/p>\n
Conclusion<\/h2>\n
In this tutorial, we have shown you how to build a simple online vCard with Sass and Compass. This is just an example, however. Sass and Compass are indeed powerful, but sometimes they are not necessary. For instance, when working on a website with a few pages and fewer lines of styles, using Sass and Compass may be considered excessive.<\/p>\n
Further reading:<\/strong> Official Sass Language Documentation<\/a><\/p>\n
This post concludes our Sass series, and we hope you enjoyed it. If you have any questions regarding this subject, don\u2019t hesitate to add them in the comment box below.<\/p>","protected":false},"excerpt":{"rendered":"
Today, we\u2019re going to continue our discussion on Sass. This time, we\u2019ll take a practical approach and build an online vCard using Sass along with Compass. The goal is to make the vCard easily adjustable for color and size. We\u2019ll utilize several Sass and Compass features, including Variables, Mixins, Operations, Selector Inheritance, Nested Rules, and…<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507,2190],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nCreating an Interactive Online vCard Using Sass & Compass - Hongkiat<\/title>\n<meta name=\"description\" content=\"Today, we're going to continue our discussion on Sass. This time, we'll take a practical approach and build an online vCard using Sass along with Compass.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/sass-compass-vcard\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating an Interactive Online vCard Using Sass & Compass\" \/>\n<meta property=\"og:description\" content=\"Today, we're going to continue our discussion on Sass. This time, we'll take a practical approach and build an online vCard using Sass along with Compass.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/sass-compass-vcard\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2012-11-14T13:01:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:14:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/sass-compass-vcard\/sass-vcard.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sass-compass-vcard\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sass-compass-vcard\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Creating an Interactive Online vCard Using Sass & Compass\",\"datePublished\":\"2012-11-14T13:01:31+00:00\",\"dateModified\":\"2025-04-03T17:14:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sass-compass-vcard\\\/\"},\"wordCount\":1198,\"commentCount\":11,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sass-compass-vcard\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sass-compass-vcard\\\/sass-vcard.jpg\",\"keywords\":[\"CSS\",\"sass\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sass-compass-vcard\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sass-compass-vcard\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sass-compass-vcard\\\/\",\"name\":\"Creating an Interactive Online vCard Using Sass & Compass - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sass-compass-vcard\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sass-compass-vcard\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sass-compass-vcard\\\/sass-vcard.jpg\",\"datePublished\":\"2012-11-14T13:01:31+00:00\",\"dateModified\":\"2025-04-03T17:14:23+00:00\",\"description\":\"Today, we're going to continue our discussion on Sass. This time, we'll take a practical approach and build an online vCard using Sass along with Compass.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sass-compass-vcard\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sass-compass-vcard\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sass-compass-vcard\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sass-compass-vcard\\\/sass-vcard.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sass-compass-vcard\\\/sass-vcard.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sass-compass-vcard\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating an Interactive Online vCard Using Sass & Compass\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Creating an Interactive Online vCard Using Sass & Compass - Hongkiat","description":"Today, we're going to continue our discussion on Sass. This time, we'll take a practical approach and build an online vCard using Sass along with Compass.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/sass-compass-vcard\/","og_locale":"en_US","og_type":"article","og_title":"Creating an Interactive Online vCard Using Sass & Compass","og_description":"Today, we're going to continue our discussion on Sass. This time, we'll take a practical approach and build an online vCard using Sass along with Compass.","og_url":"https:\/\/www.hongkiat.com\/blog\/sass-compass-vcard\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-11-14T13:01:31+00:00","article_modified_time":"2025-04-03T17:14:23+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/sass-compass-vcard\/sass-vcard.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/sass-compass-vcard\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/sass-compass-vcard\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Creating an Interactive Online vCard Using Sass & Compass","datePublished":"2012-11-14T13:01:31+00:00","dateModified":"2025-04-03T17:14:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/sass-compass-vcard\/"},"wordCount":1198,"commentCount":11,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/sass-compass-vcard\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/sass-compass-vcard\/sass-vcard.jpg","keywords":["CSS","sass"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/sass-compass-vcard\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/sass-compass-vcard\/","url":"https:\/\/www.hongkiat.com\/blog\/sass-compass-vcard\/","name":"Creating an Interactive Online vCard Using Sass & Compass - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/sass-compass-vcard\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/sass-compass-vcard\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/sass-compass-vcard\/sass-vcard.jpg","datePublished":"2012-11-14T13:01:31+00:00","dateModified":"2025-04-03T17:14:23+00:00","description":"Today, we're going to continue our discussion on Sass. This time, we'll take a practical approach and build an online vCard using Sass along with Compass.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/sass-compass-vcard\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/sass-compass-vcard\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/sass-compass-vcard\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/sass-compass-vcard\/sass-vcard.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/sass-compass-vcard\/sass-vcard.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/sass-compass-vcard\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating an Interactive Online vCard Using Sass & Compass"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-413","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15441","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=15441"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15441\/revisions"}],"predecessor-version":[{"id":73558,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15441\/revisions\/73558"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=15441"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=15441"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=15441"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=15441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}