Languages
[Edit]
EN

SCSS - variable declaration

0 points
Created by:
Laylah-Walsh
624

In this article, we would like to show you how to declare variable in SCSS.

In order to declare variable we need to precede it with $ sign with the following syntax:

Where:

  • expression - may be some value, other variable, some calculation or a function call. 

Note:

Don't confuse SCSS variables with SASS variables.

 

Practical examples

Edit

Example 1

Edit

In this example, we create primary-color variable with a simple value of green and assign it as a background-color of our element class.

Example 2

Edit

We can also use variables with more complex expression as their value, for example specify whole border:

 

See also

Edit
  1. SCSS / SASS - installation

  2. SCSS - compile and minify to css file

  3. React - style components using CSS modules

References

Edit
  1. Sass: Variables

Alternative titles

  1. SCSS - create variable in .scss file
  2. SCSS - how to create and use variable
  3. SCSS - how to declare and use variable
  4. SCSS - create variable
1
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join