Skip to main content

What are variables in SASS?

Sass Variables allow you to define a value once and use it in multiple places. Variables begin with dollar signs and are set like CSS properties. You can change the value of the variable in one place, and all instances where it is used will be updated.

When defining a variable we store in it a value, which often reoccur in the CSS like a palette color, a font stack or the whole specs for a cool box-shadow. Also, mostly the variables are defined at a fixed location, like top of the SASS file or in a dedicated separate file. This makes it easy to locate and change the values, instead of searching through the entire stylesheet.

Below you can see a simple example, where variables are used to define font, color and shadow.

SCSS file:
$title-font: normal 24px/1.5 'Open Sans', sans-serif;
$title-color: #F44336;
$box-shadow-bottom-only: 0 2px 1px 0 rgba(0, 0, 0, 0.2);

h1.title {
  font: $title-font;
  color: $title-color;
}

div.container {
  color: $title-color;
  background: #fff;
  width: 100%;
  box-shadow: $box-shadow-bottom-only;
}
Output CSS file after compilation
h1.title {
  font: normal 24px/1.5 "Open Sans", sans-serif;
  color: #F44336; 
}

div.container {
  color: #F44336;
  background: #fff;
  width: 100%;
  box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
}
SASS variables make it extremely easy to organize your stylesheet and make updates.

GrooveUI allows you to create multiple themes, by setting separate values of SASS variables for each theme. New themes can be created using GrooveUI website and values updated in real time.

Comments

Popular posts from this blog

CSS Variables with PHP vs GrooveUI

Whenever we want to control CSS stylesheets dynamically, we think about CSS variables. However, CSS does not have native support for variables. Hence we are tempted to inject variables using server side programming languages.

Why CSS Variables? First let's understand why we would want to use variables in CSS.

Managing values across large CSS files. If we have a large CSS file, where we are using same value again and again in various definitions, wouldn't it be nice to define the value as a variable (constant) and use that variable in our CSS classes. For example, we have a primary color, say Orange, and we are hard coding it's value across our entire CSS file for buttons, text, background etc. This could easily turn into maintenance nightmare for large CSS files. A better approach would be to define the primary color as a variable and use that across our CSS file.Showing customer branding (Dynamic Themes). This case generally happens with SaaS (Software as a Service) applic…

SASS with GrooveUI

SASS stands for Syntactically Awesome StyleSheets. Sass is a CSS pre-processor with syntax advancements. Style sheets created in SASS syntax are processed by the SASS compiler, and turned into regular CSS style sheets. It allows you to easily manage complex CSS files by using variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library. One of the most powerful features of SASS is the use of variables. Example, instead of repeating the value of your sites primary color at multiple places, you could define a variable for primary color and then use that throughout your stylesheet. SASS compiler will replace the value of variable with actual value while generating CSS. One feature which is left wanting, is the ability to dynamically update these variables, say from database values. This is where Groo…

What is SASS Mixin?

If you find yourself writing same piece of CSS code over and over again, you might be able to use SASS Mixin to your advantage.

A Mixin is a block of code that let's us group CSS declarations that we can reuse throughout our stylesheet.

For example, if we want to display HTML element as a flex element, we might end up repeating below lines of code for each element.
.row {display: -webkit-flex;display: flex; } You can define a Mixin as below,
@mixin flex {display: -webkit-flex;display: flex; } And include it in other definitions.
.row { @include flex; } After compilation, all Mixin references will be replaces by Mixin definition.
.row {display: -webkit-flex;display: flex; }