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

Improving your SaaS product demo

In any considered B2B SaaS purchase, the product demo is often a key part of the sales process. A product demo is a valuable tool for getting new customers interested in your SaaS product. It's also a tool to establish your credibility and industry knowledge.

However, in a large number of cases, potentially lucrative demos quickly turn into a sinkhole of wasted opportunity, not to mention waste of effort and resources.

Let's try to understand how to prepare for a good SaaS product demo.
Goals of the demo A product demo is never about showcasing the long list of features of your product.
It's more about, Understanding the prospect's pain points.Showcasing how your product is a good fit to solve that pain.Leaving your prospect believing that your product is a great solution to their pain.Establishing confidence with the prospect about your team.Showcasing your product as a stable and matured solution.Failure Reasons Most of the demos fail because:
1. Failure to understand…

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; }

What is White Label Software?

A white label software is a product or service produced by one company (the producer) that other companies (the Customers) can re-brand to make it appear as if they had made it.

Websites use white labels to enable their customers to offer a service without having to invest in creating the technology and infrastructure themselves. Many IT and Software companies use white-label software and services to provide specialized services without having to invest in developing their own product.

One of the biggest requirement for a white label software provider is, that it's customers should be able to apply their branding to the product. That means applying their logo, colors, fonts etc to the software so that the software looks part of Customers existing product offerings.

To apply customer branding the white label software provider will have to tackle following challenges:

Make branding components configurable.Store customer preferences.Devise ways to identify customer and apply their br…