Difference between CSS Variables and Preprocessor
Last Updated :
22 May, 2023
In this article, You will learn the differences between the CSS variables (cascading variables) and CSS preprocessors. They both implement the extra capabilities into CSS in their own different ways.
CSS variables and preprocessors are two different things. Both have advantages and disadvantages. The CSS preprocessor is a language that can be used to define your own CSS rules. It could be used for custom properties or just for creating variables. On the other hand, the CSS variables (also called custom properties) are dynamic values that can be reused across multiple elements and style rules in a web page. You can define values ​​once and reference them in multiple places, making it easier to update and maintain your styles.
CSS variables: Like basic variables in any other programming language, CSS variables are also simple variables. These variables have a range in which they can be used and are used to store values. The main advantage of variables is also that they make it possible to update/modify the defined values from a single location while reusing the same values elsewhere in the defined range.
Some key points to remember while defining CSS variables
- Variables’ name always start with a double hyphen (–) and terminate with a semi-colon.
- The best practice is to specify the variable inside the root: pseudo-class.
- While using the variable use var() keyword first and then inside mention the variable name. For ex. var(–white-color)
Syntax:
:root {
--variable-name: value;
}
–variable-name: This is the title of the variable that the programmer specifies. It is recommended to provide a meaningful name. It’s a necessary parameter.
value: It is an optional parameter that can leave it blank but while using it accepts a fallback value.
For example: var(--white-color,#ffff)
The above example says if –white-color is not defined use #ffff instead.
It is not required to always use root: also called pseudo-class that can specify the scope at your convenience. The normal practice is to use root which specifies the global scope to utilize the specified variables throughout the code. The variable name is case-sensitive. For example: “–white-color” and “–WHITE_COLOR” is different.
Implementation:
property : var(--variable-name);
The variable name is always used inside the var() method.
Example: In this example, we are using the above-explained method.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>variables</title>
<style>
:root {
--green: rgb(0, 128, 0);
--height: 50px;
--width: 2rem:
}
.box {
height: var(--height);
width: (--width);
background-color: var(--green);
border-radius: 10px;
}
.text {
text-align: center;
font-size: 2rem;
font-weight: bolder;
}
</style>
</head>
<body>
<h1 style="color:green;text-align: center;">
GeeksforGeeks
</h1>
<div class="box">
<h3 class="text">welcome geeks</h3>
</div>
</body>
</html>
|
You can learn more about CSS variables here.
CSS Preprocessors: CSS preprocessors are scripting languages that extend the default or inbuilt features of vanilla CSS. All scripting languages come with their unique features and Syntax writing. Preprocessors offer properties like inheritance, mixing, conditional statement, and variables but with a slight variation of syntax in each preprocessor you will be able to write the CSS code in preprocessors as you were writing in pure CSS before preprocessors but with additional features.
- Preprocessors minimize the duplication of the code which help programmers to write code more quickly.
- In order for HTML to render the page to the client side, the compiler converts the code after creating it in the preprocessors into a simple CSS file.
There are many small preprocessors in the market, but these are a few popular ones:
All of the above come with additional features for vanilla CSS.
Sass/scss: Stands for Syntactically Awesome Style Sheet(Sass) or Sassy Cascading Style Sheets(Scss).
Scss Syntax:
CSS
$green : rgb(0,128,0);
$h:50px;
$w:200px;
.box {
height:$h;
width:$w;
background-color:$green;
}
|
Here, the $ sign is used to define a variable and the file extension is .scss
Sass syntax:
CSS
$green: rgb(0,128,0)
$h: 50px
$w: 200px
.box {
height: $h
width: $w
background-color: $green
}
|
On the other hand, sass is more indentation based and has no curly braces but semi-colon is used. The file extension is .sass.
This is the code to convert scss file named style.scss to a CSS file named style.css because browsers only understand CSS.
sass style.scss:style.css
Compiled CSS code:
CSS
.box {
height: 50px;
width: 200px;
background-color: rgb(0,128,0);
}
|
Less: Less stands for learner style sheets and the extension for saving this is .less
Less Syntax:
CSS
@green: rgb(0,128,0);
@h: 50px;
@w: @h + 150px;
.box {
width: @w;
height: @h;
}
|
Here, the @ sign is used for defining the variable. Less comes with much more inbuilt functionality as well.
This is the code to convert less file named style.less to a CSS file named as style.css because browsers only understand CSS.
lessc style.less style.css
CSS Compiled Code.
CSS
.box {
height: 50px;
width: 200px;
}
|
Stylus: Stylus offers properties of sass as well as many of transparent mixins, passing arguments, and many more.
CSS
green-color : rgb(0,128,0)
h: 50px
w: 150px
.box {
width: w
height: h
}
|
.styl It is a file extension for the stylus. You can define variables with a $ sign as well.
PostCss: PostCss is a modern preprocessor in postcss that you write code as you do in vanilla CSS but the postcss can transform that code in any desired format. It comes with lots of plugins like postcss-utilities, atcss, rucksack, and many more it is just a tool for transforming CSS with JavaScript.
Example: Here is a demonstration of the above method.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>preprocessor</title>
</head>
<body>
<h1 style="color:green;text-align: center;">
GeeksforGeeks
</h1>
<div class="box">
<h3 class="text">welcome geeks</h3>
</div>
</body>
</html>
|
File with style.scss extension
CSS
$green : rgb(0,128,0);
$height:50px;
$width:2rem;
.box{
height: $height;
width: $width;
background-color:$green;
border-radius: 10px;
}
.text{
text-align: center;
font-size: 2rem;
font-weight: bolder;
}
|
Compiled CSS Code
sass style.scss:style.css
CSS
.box {
height: 50px;
width: 2rem;
background-color: green;
border-radius: 10px;
}
.box .text {
text-align: center;
font-size: 2rem;
font-weight: bolder;
}
|
Output:
| Features |
CSS variables |
CSS preprocessors |
| Definition |
Like basic variables in any other programming language, CSS variables are also simple variables. |
CSS preprocessors are scripting languages that extend the default or inbuilt features of the vanilla CSS. |
| Reusability |
Variables are reusable. |
CSS We can reuse code in preprocessors because they provide a functionality called mixin; |
| Compile |
This is already a css code so no need to compile it again and again. |
Preprocessors have to compile their code to CSS because browsers only understand CSS. |
The main advantage of preprocessors over CSS variables is that they take up less space because they are compiled into proper CSS. Without having to fear that it would damage other browsers or files, you can use them in style sheets.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...