Variables in both CSS and sass;

Variables in both CSS and sass;

cyrusCodes's photo
cyrusCodes
·

4 min read

Traditionally variables were only used in programming languages but nowadays even styling languages like CSS and more so preprocessors have adopted the use of variables. This article highlights the use of variables in both CSS code well as sass code specifically the SASS way.

Variables in CSS and SCSS are used primarily for two reasons that will be quite evident from our examples and subsequent explanation.

  • Ease in management of repetitive code in your CSS and SCSS.

  • Ease in making changes to important and crucial parts of your code from just one snippet. These snippets include colors, fonts, media query viewpoints, box shadows among others.

1. Variables in CSS; variables in CSS can be easily most likely in the root tag and applied anywhere in your CSS file. Example;

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

Applying these variables is also quite easy as follows;

div {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

2. variables in SCSS;

Preprocessors are used to take some code in a particular format and render it another format in this instance SCSS to CSS. There are numerous benefits of working with them including;

Separating your code with production code.

Code written directly to the code editor may become messy and it normally is especially when it comes to styling. Sure, there code refactoring and review which normally takes a lot of time, but instead, a preprocessor does all this for you.

Secondly we can use functions and methods built-in SASS;

These functions make styling so much faster and also expand the capabilities of CSS without a lot of complications.

With Sass it's possible to nest code and also utilize partials which means easy management and arrangement of our code.

Finally, Sass can be expanded and utilize third-party snippets like functions, libraries, mixins, and frameworks which means it can be expanded beyond ordinary CSS capabilities.

This article focuses on variable and let's have a look at an example in SCSS;

$primary-color: #28df99;
$max-width: 1280px;
$border-radius: 5px;
$box-shadow: 2px 2px 12px rgba($primary-color,.5);

These are all variables declared at the beginning of our SCSS file which is the preprocessor of CSS. These variables are applicable in any part of the code by just referring to the variable name. Example;

body{
background-color: $primary-color;
max-width: $max-width;
}
div{
  box-shadow: $box-shadow;
  border-radius: $border-radius;
}

If an adjustment to the color is ever required only the value of the primary color ($primary-color: #28df99;) should be adjusted and the change applies to the entire code where this is applied.

It's important to however note that just like CSS, SASS reads its code in sequence from top to bottom so the variables must be defined before they are ever used in your code otherwise the style will not be applied.

SassscssCSS3Frontend Development100DaysOfCode