CSS native variables & mixins using @apply

Posted by Ganesh Patil on September 29, 2016 in CSS

This is an experimental technology
Because this technology’s specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

Web developers have been waiting for inbuilt support for CSS variables & mixins for quite a long time. Devs have depended on tools like SCSS, SSSS,etc. pre/postprocessors. But now new features in CSS are being introduced to add inbuilt support for these features. Many browsers have started supporting these features and some are planning to implement them in upcoming releases. These features are very helpful for achieving simple tasks like branding, consistent styling across a website, easier management to change site color scheme, etc.

CSS Variables:

The syntax to declare css variable is

--variable-name: variable-value;

Variable names are case sensitive. These variables can have values for colors, strings, pixel values etc.  To use these variables syntax is

css-property-name: var(--variable-name, [, optional-default-value])

optional-default-value will be the value of attribute if variable is not defined.

Example.

:root{
--bg-color: #afafaf;
}

.cls-container{
padding: 10px;
background: var(--bg-color);
}

CSS variables follow same rules as other CSS properties in case of scopes & inheritance. If a class overrides the value of a global variable, then the overriden variable value will apply within this class’s scope in HTML. Outside this class’s scope, the global variable value will apply.

For example, consider thefollowing CSS. We have defined a global variable using :root, & then we have overridden variable value in class cls-container.

:root{
--bg-color: #afafaf;
}

.cls-container{
--bg-color: red;
}

.cls-child{
background: var(--bg-color);
}

And we have following html

<div>
   <div class="cls-container">
      <div class="cls-child">
         This child is in container's scope
      </div>
   </div>
   <div class="cls-child">
      This child is out of container's scope
   </div>
</div>

The first occurrence of div.cls-child will have red background as it comes within .cls-container class’s scope which has overridden the variable value. But the second div.cls-child is out of .cls-container class’s scope, so it will have global value for CSS variable & will show grey background.

CSS MIXIN (CSS @apply rule):

If you have to add multiple CSS properties to classes or other selectors, CSS mixin and @apply is the way to go. Syntax for creating mixin block is

--mixin-name{ /* css properties */ }

To apply mixing to any class or other CSS selector we have to use syntax

@apply --mixin-name

Example:

:root{
--site-colors{
color: blue;
background: #aaaabb;
}
}

.cls-header-class{
padding: 10px;
@apply --site-colors;
}

Note:

You can check compatibility for CSS variables & @apply at following location:

Ganesh Patil

Co-Founder of CodeSphere Solutions

Ganesh is passionate about Web Development. He is a minimalist and likes exploring new and interesting technologies. In his free time he likes to play his guitar, watch movies and play with his dog, Penny.

We at CodeSphere Solutions specialize in Web Development. Do you need help with a web development project?

Tell us about it
Share This