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;

Comments ( 0 )

    Leave A Comment

    Your email address will not be published. Required fields are marked *