Category: SASS

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;
$button-height:36px;

/* 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;


//age-Proof-suncare
$red: #6c001c;
$red-hover: #450012;
//redness-therapy
$teal: #00ad9c;
$teal-hover: #008679;
//resurgence
$light-green: #8ca509;
$light-green-hover: #6a7e04;
//acne
$acne-blue: #0391ce;
$acne-blue-hover: #006591;
// e-shield
$orange: #ff7f00;
$orange-hover: #d76c02;
//bodycare
$silver: #695744;
$silver-hover: #44321f;
//murad-man
$green: #0d523b;
$green-hover: #062b1f;
//pore reform
$pink: #b5005c;
$pink-hover: #870045;
//age reform
$purple: #891f62;
$purple-hover: #6f154e;
//youth-builder
$yellow: #dcc325;
$yellow-hover: #bfa732;
//harrys
$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*/
$item-height: 423px;


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

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