What are JavaScript preprocessors

CSS variable (custom properties)

CSS var

Variables are now an official part of the CSS specification and are called there CSS Custom Properties - "self-made" or "own" properties.

Modern browsers (from Firefox 31+, Chrome 49+, Safara 9.1+, Opera 36+, Edge 15) already support "natural" CSS variables, with the exception of the usual suspects (IE11 and older).

CSS variables vs preprocessor variables

Compared to the CSS preprocessors SASS and LESS, CSS Custom Properties appear plain and simple. But they reduce repetitions in long CSS files through global agreements. They are useful when defining colors and color nuances and together with CSS calc for calculating width and height.

  • The browsers evaluate variables or custom properties directly in the CSS. The CSS of the preprocessors SASS and LESS, however, first has to be translated into standard CSS.
  • Javascript can access CSS variables directly and change them on the fly. Since the CSS of the preprocessors has to be translated first, Javascript only has the final CSS under control.

Declare and get variables

Variables are defined in a CSS selector that defines the scope (Scope). body, : root and * declare e.g. a global scope. so the entire CSS.

The name of the CSS variable begins with two hyphens (-) and is case sensitive, i.e. sensitive to upper and lower case. "--me-color" and "--me-color" are different properties or variables. The prefix "me" is for readability only.

: root {--me-color: hsl (350.50%, 50%); }

declares a global variable --me-color with the value hsl (350.50%, 50%). The var () function refers to the variable.

.top-menu h1 {color: var (- me-color); }

Between var and the opening round bracket must not have a space!

And even setting a simple value works with CSS variables (for those who love HSL colors).

* {--me-hue: 180; } .excerpt {background: hsla (var (- me-hue), 50%, 50%, 0.2); }

The var () function

The var () function gets the value of a variable. Fallback values ​​can be written between the round brackets (if the variable is not reached). Fallback values ​​are a comma-separated list that the function compiles into one value.

var (- my-fonts, "Helvetica Neue", "Helvetica", "Arial", "sans-serif");

Shorthands can also be saved in a variable. The values ​​for CSS margin and border are not separated by commas, but by spaces.

.bg {--margin: 1em auto; --frame: 0px 1px 5px 1px; } .mystyle {border: var (--frame), 4px 8px; }

Cascading

CSS variables or Custom Properties follow the rules of CSS cascade and inheritance.

This p is under div.wrap inherits its color from .wrap

This p is under .excerpt > .wrap.
.excerpt inherits the background color to p,
but the color keeps coming from .wrap.

CSS
<style> :root { --me-hue: 180; } .wrap { color: hsl(var(--me-hue), 30%, 40%); } .bg { background: hsl(var(--me-hue), 50%, 90%); } </style>
HTML
<div class="wrap"> <p>Dieses p liegt unter div.wrap erbt seine Farbe von .wrap</p> <div class="excerpt"> <p>Dieses p liegt unter .excerpt > .wrap. excerpt vererbt dem p die Hintergrundfarbe.</p> </div> </div>

No custom properties for breakpoints

CSS variables can only be used for the values ​​of properties, but not as selectors or class names. The CSS var function cannot be used for breakpoints either (what a shame ...).

: root {--mobile-medium: 679px; } @media (max-width: var (- mobile-medium)) {}

Custom properties cannot be used in media queries. The CSS variable in the example applies to: root, i.e. the html element, and is inherited by other elements. But media queries are not elements and do not inherit anything from - the approach therefore does not work without a CSS preprocessor.

With a little detour, Custom Properties can get the breakpoint under control even without a CSS preprocessor:

: root {--spacer: 1.5em; } section {margin-bottom: var (- spacer); } @media (min-width: 680px) {: root {--spacer: 2em; }} @media (min-width: 1024px) {: root {--spacer: 4em; }}

Query CSS with Javascript

The Javascript function window.getComputedStyle () returns the final CSS property of an element - even for properties based on CSS variables.

CSS
.bg {background: hsl (var (- me-hue), 50%, 90%); padding: 1em; }
Javascript
var elem = document.querySelector (". bg"); var elemProp = window.getComputedStyle (elem, null) .getPropertyValue ("background"). trim (); document.querySelector (". msg"). innerHTML = "Computed Style for elem" + elemProp;

Change CSS variable with Javascript

This also works: Change a CSS variable with Javascript. This is where the full beauty of the CSS variables is evident, because the change is easy and avoids having to search for everyone involved.

Declaration of the variables in the CSS file
: root {--time: 6s; }
Changing the CSS variables with Javascript
root.style.setProperty ('- time', duration + "s");

External sources