Category: Code Samples

Functions in SASS

Another cool feature in SASS is that we can create functions for our CSS. In the following code, I am creating a function to be able to dynamically create a linear gradient with custom opacity. Please check it out.

@function linear-gradient($pos, $gradients...) {
  $type: linear;
  $pos-type: type-of(nth($pos, 1));

  // if $pos doesn't exist, fix $gradient
  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
    $gradients: zip($pos $gradients);
    $pos: false;

  $type-gradient: $type, $pos, $gradients;
  @return $type-gradient;

This is how you call the function

@include background(linear-gradient(top, orange, red));

Working with Variables in SASS

Working with SASS will give you many benefits that will make your life easyer. Using Variables is one of them. You can define all the values as variables and use them all over your site knowing that later, changing the value will be a breaze. Please take a look at my code example I did with SASS variables.
/* Dimensions */
$large: 22px;
$medium: 14px;
$small: 12px;
$micro: 10px;

//global button variables
$button-radius: 4px;

/* Form Dimensions */
$input-height: 40px;
$field-radius: 4px;

/* Site Dimensions */
$site-wide: 1205px;
$site-width: 920px;
$footer-height: 395px;

/* Colors */
$black: #242524;
//this is been used as an accent color.
// The blue is just a name I am turning it to grey now
$blue: #898989;
$white: #fff;
$off-white: #f4f4f4;
$dark-grey: #55565a;
$grey: #999;
$dark: #55565a;
$light-grey: #e1e1e1;
$soft-grey: rgba(241,241,241,1);
$light-blue: #198ccc;
$light-brown: #aca095;
// Mainly for button use

//google red for cart & checkout
$google-red: #e84e40;
$google-red-hover: #FF5445;

//google green
$google-green: #8bc34a;

//PayPal grey
$paypal-grey: #e4e4e4;
$paypal-grey-hover: #d5d5d5;

$red: #6c001c;
$red-hover: #450012;
$teal: #00ad9c;
$teal-hover: #008679;
$light-green: #8ca509;
$light-green-hover: #6a7e04;
$acne-blue: #0391ce;
$acne-blue-hover: #006591;
// e-shield
$orange: #ff7f00;
$orange-hover: #d76c02;
$silver: #695744;
$silver-hover: #44321f;
$green: #0d523b;
$green-hover: #062b1f;
//pore reform
$pink: #b5005c;
$pink-hover: #870045;
//age reform
$purple: #891f62;
$purple-hover: #6f154e;
$yellow: #dcc325;
$yellow-hover: #bfa732;
$blue-grey: #607D8B;
$blue-grey-hover: #3C5866;

//acne = acne blue
//age-reform = purple
//pore-reform = pink
//murad-man = green
//bodycare = silver
//e-shield = orange
//resurgence = light green
//redness-therapy = teal
//age-Proof-suncare = red
//youth-builder = yellow

/* Z-Index */
$level1: 1;
$level2: 2;
$level3: 3;
$level4: 4;
$level5: 5;

/* Speeds */
$quick: .1s;
$fast: .25s;
$slow: .45s;
$half-sec: .5s;
$mini-sec: .20s;

/* Fonts */
$bebas-light: "bebas neue light";
$bebas-book: "bebas neue book";
$bebas-bold: "bebas neue bold";

$item-height: 423px;

/* Community, Bio and Insider vars */
$big-font: 30px;
$medium-font: 18px;
$small-font: 14px;
$extra-small-font: 12px;

$little-hero-height : 420px;
$medium-hero-height: 650px;
$hero-height: 655px;

Practice javaScript Objects in an array

Here I wrote an object constructor called person, and then I created an empty array, then I am adding each family members to it one by one and the looping true them to print their name.  I hope this comes handy to you.


// My Person constructor
function Person(name,age){ = name;
this.age = age;

// Now I can make an array of people
var family = new Array();
family[0] = new Person("alice", 40);
family[1] = new Person("bob", 42);
family[2] = new Person("michelle", 8);
family[3] = new Person("timmy", 6);

// loop through my new array

for(i=0; i<family.length; i++){

How to target IE 8 and bellow inside your css

body {
color: red; /* all browsers, of course */
color : green9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */

How to make your Vimeo or YouTube video responsive

First of all wrap the video embed code with a’div’and specify a 50% to 60% padding bottom. Then, name and specify the child elements i.e ‘iframe’, ‘object’, ‘embed’ as having 100% width, 100% height, with absolute position. This forces all the embed elements to expand to full-width automatically!

Here is the html mark up

<div class="video-wrapper">
   <iframe width="500" height="281" 
src="" frameborder="0" allowfullscreen="">

Using CSS you can set the video to be responsive.

.video-wrapper { 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 30px; 
    height: 0; overflow: hidden; 
.video-container iframe, 
.video-container object, 
.video-container embed { 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%;