Basics of Variables
Variables are used to store reusable values like:
- Colors
- Font sizes
- Spacing
- Border radius
- Shadows
Instead of writing the same values repeatedly, developers store them in variables and reuse them anywhere.
Why Variables Are Important?
- Reusable values
- Cleaner code
- Easy maintenance
- Simple theme updates
- Better consistency
CSS Variables
CSS variables are also called Custom Properties.
CSS Variable Syntax
[code theme="dark"]
:root{
--primary-color:#ff6600;
}
[/code]
Using CSS Variables
[code theme="dark"]
.button{
background:var(--primary-color);
}
[/code]
Complete Example
[code theme="dark"]
:root{
--primary:#ff6600;
--text-color:#333;
--radius:12px;
}
.card{
background:var(--primary);
color:var(--text-color);
border-radius:var(--radius);
}
[/code]
Why :root is Used?
:root creates global variables available everywhere.
Local Variables
Variables can also be scoped inside components.
[code theme="dark"]
.card{
--card-bg:#f5f5f5;
background:var(--card-bg);
}
[/code]
Changing Variables Dynamically
CSS variables work great for themes.
Dark Mode Example
[code theme="dark"]
:root{
--bg:white;
--text:black;
}
.dark{
--bg:black;
--text:white;
}
body{
background:var(--bg);
color:var(--text);
}
[/code]
Fallback Values
If a variable is missing, fallback value is used.
[code theme="dark"]
color:var(--primary, blue);
[/code]
SCSS Variables
SCSS variables use the $ symbol.
SCSS Variable Syntax
[code theme="dark"]
$primary:#ff6600;
[/code]
Using SCSS Variables
[code theme="dark"]
.button{
background:$primary;
}
[/code]
Complete SCSS Example
[code theme="dark"]
$primary:#ff6600;
$text:#333;
$radius:10px;
.card{
background:$primary;
color:$text;
border-radius:$radius;
}
[/code]
CSS Variables vs SCSS Variables
|
CSS Variables
|
SCSS Variables
|
|
Work in browser
|
Compile before browser
|
|
Dynamic runtime changes possible
|
Static after compilation
|
|
Uses --variable
|
Uses $variable
|
|
Great for themes
|
Great for project structure
|
SCSS Variables File
Usually variables are stored inside:
[code theme="dark"]
_variables.scss
[/code]
Example
[code theme="dark"]
$primary:#ff6600;
$secondary:#222;
$text:#444;
$radius:12px;
[/code]
Import Variables
[code theme="dark"]
@use "abstracts/variables";
[/code]
Use Variables
[code theme="dark"]
.card{
background:variables.$primary;
}
[/code]
Using "as *"
[code theme="dark"]
@use "abstracts/variables" as *;
.card{
background:$primary;
}
[/code]
Common Variable Types
- Primary colors
- Typography sizes
- Spacing system
- Border radius
- Z-index values
- Shadows
- Animation timing
Spacing Variables Example
[code theme="dark"]
$spacing-sm:8px;
$spacing-md:16px;
$spacing-lg:24px;
[/code]
Typography Variables Example
[code theme="dark"]
$font-sm:14px;
$font-md:16px;
$font-lg:24px;
[/code]
Shadow Variables Example
[code theme="dark"]
$shadow-md:0 4px 10px rgba(0,0,0,0.1);
[/code]
Variables in Tailwind CSS
Tailwind usually uses:
[code theme="dark"]
tailwind.config.js
[/code]
Example
[code theme="dark"]
module.exports = {
theme: {
extend: {
colors: {
primary:"#ff6600",
},
},
},
}
[/code]
Use in Tailwind
[code theme="dark"]
[/code]
Common Mistakes
- Too many unnecessary variables
- Bad naming conventions
- Duplicate color values
- Hardcoded spacing everywhere
Best Practices
- Use semantic naming
- Keep variables organized
- Store variables in separate files
- Use consistent spacing system
- Avoid random hardcoded values
Good Naming Example
[code theme="dark"]
$primary-color
$text-color
$border-radius
$spacing-md
[/code]
Bad Naming Example
[code theme="dark"]
$red
$box1
$value123
[/code]
Quick Summary
- Variables store reusable values
- CSS Variables use --name
- SCSS Variables use $name
- :root creates global CSS variables
- SCSS variables compile into CSS
- Variables improve maintainability and consistency
Variables are one of the most important features for scalable and maintainable frontend development.