What is the difference between CSS variables and preprocessor variables ?

Variables are one of the major reasons CSS preprocessors exist at all. The ability to set a variable for something like a color, use that variable throughout the CSS you write, and know that it will be consistent, DRY, and easy to change is useful. You can use native CSS variables ("CSS Custom Properties") for the same reasons. But there are also some important differences that should be made clear.

A simple example of preprocessor variable usage is like this:

$brandColor: #F06D06; .main-header { color: $brandColor; } .main-footer { background-color: $brandColor; }

The above code would do nothing in a browser. The browser wouldn't understand the declarations and toss them out. Preprocessors need to compile into CSS to be used. This code would compile to:

.main-header { color: #F06D06; } .main-footer { background-color: #F06D06; }

This is now valid CSS. The variable was part of the preprocessor language, not CSS itself. Once the code compiles, the variables are gone.
More recently, native CSS has started supporting CSS variables, or "CSS Custom Properties". It allows you to work with variables directly in CSS. There is no compiling.

A simple example of CSS custom property usage is like this:

:root { --main-color: #F06D06; } .main-header { color: var(--main-color); } .main-footer { background-color: var(--main-color);

These two demos achieve the exact same thing. We were able to define a color once and use it twice.

Why would you use native CSS custom properties?

  • You can use them without the need of a preprocessor.
  • They cascade. You can set a variable inside any selector to set or override its current value.
  • When their values change (e.g. media query or other state), the browser repaints as needed.
  • You can access and manipulate them in JavaScript.
:root { --color: red; } body { --color: orange; } h2 { color: var(--color);
}

You could even re-set variables within media queries and have those new values cascade through everywhere using them, something that just isn't possible with preprocessor variables.




Comments

Post a Comment

Popular posts from this blog

What is an operator? An  operator  is an object that is capable of manipulating a value.  For example, in "1 + 2", the "1" and "2" are the operands and the plus symbol is the operator.  JavaScript supports the following types of operators.   Arithmetic Operators Comparision Operators Logical (or Relational) Operators Assignment Operators Conditional (or ternary) Operators
Read more
Use of page.php in WordPress. Display page title and page content. Display comment list and comment form (unless comments are off). Include  wp_link_pages()  to support navigation links within a page. Metadata such as tags, categories, date and author should not be displayed. Display an "Edit" link for logged-in users with edit permissions. Use of single.php in WordPress. Include  wp_link_pages()  to support navigation links within a post. Display post title and post content. Display the post date. Display the author name (if appropriate). Display post categories and post tags. Display an "Edit" link for logged-in users with edit permissions. Display comment list and comment form. Show navigation links to next and previous post using  previous_post_link()  and  next_post_link() . Use of function.php in WordPress. The functions file behaves like a  WordPress Plugin , adding features and functionality to a WordPress site....
Read more

Bootstrap Breakpoints

  // Extra small devices (portrait phones, less than 576px) // No media query for `xs` since this is the default in Bootstrap // Small devices (landscape phones, 576px and up) @media ( min-width : 576px ) { ... } // Medium devices (tablets, 768px and up) @media ( min-width : 768px ) { ... } // Large devices (desktops, 992px and up) @media ( min-width : 992px ) { ... } // Extra large devices (large desktops, 1200px and up) @media ( min-width : 1200px ) { ... } // No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }` @include media-breakpoint-up ( sm ) { ... } @include media-breakpoint-up ( md ) { ... } @include media-breakpoint-up ( lg ) { ... } @include media-breakpoint-up ( xl ) { ... } // Extra small devices (portrait phones, less than 576px) @media ( max-width : 575 .98px ) { ... } // Small devices (landscape phones, less than 768px) @media ( max-width : 767 .98px ) { ... }...
Read more