Welcome Guest! (App Version 5.16)

websitnero logo name

Sass Variables

What are Variables in Sass?

Variables in Sass are just like variables in any other programming language. They serve as containers in memory to store some fixed value. As in JavaScript the value could be number, string or pointer to some object or array, but in Sass we store values more specifically like strings which correspond to various CSS property-values.

Look at example below to understand it with example:

main.scss:

$primary-color: red;
$secondary-color: blue;
$tertiary-color: green;
p {border: 2px solid $primary-color; background:tertiary-color;}
span {color:$secondary-color;border:1px solid $tertiary-color;}
				

main.css (compiled):

p {border: 2px solid red; background: green;}
span {color: blue; border: 1px solid green;}

index.html:

This is a paragraph.

This is a span.
WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.